Update charts

app/Http/Controllers/Controller.php

@@ -161,10 +161,10 @@ class Controller extends BaseController
         $dailyData[date('j', strtotime(now())) - 1] = round((array_sum($hourlyFlow) + $currentFlow) / GB, 3);
 
         return [
-            'trafficDaily' => json_encode($dailyData),
-            'trafficHourly' => json_encode($hourlyData),
-            'monthDays' => json_encode(range(1, date('j'))), // 本月天数
-            'dayHours' => json_encode(range(0, date('G') + 1)), // 本日小时
+            'trafficDaily' => $dailyData,
+            'trafficHourly' => $hourlyData,
+            'monthDays' => range(1, date('j')), // 本月天数
+            'dayHours' => range(0, date('G') + 1), // 本日小时
         ];
     }
 }

app/helpers.php

@@ -65,11 +65,11 @@ if (! function_exists('seconds2time')) {
         $hour = floor(($seconds % Day) / Hour);
         $minute = floor((($seconds % Day) % Hour) / Minute);
         if ($day > 0) {
-            return $day.trans('validation.attributes.day').$hour.trans('validation.attributes.hour').$minute.trans('validation.attributes.minute');
+            return $day.trans_choice('validation.attributes.day', 1).$hour.trans_choice('validation.attributes.hour', 1).$minute.trans('validation.attributes.minute');
         }
 
         if ($hour != 0) {
-            return $hour.trans('validation.attributes.hour').$minute.trans('validation.attributes.minute');
+            return $hour.trans_choice('validation.attributes.hour', 1).$minute.trans('validation.attributes.minute');
         }
 
         return $minute.trans('validation.attributes.minute');

resources/lang/en/validation.php

@@ -119,10 +119,10 @@ return [
         'password'              => 'Password',
         'password_confirmation' => 'Password Confirmation',
         'phone'                 => 'Phone',
-        'day'                   => 'Day',
+        'day'                   => '{1} Day|{2} Day',
         'month'                 => 'Month',
         'year'                  => 'Year',
-        'hour'                  => 'Hour',
+        'hour'                  => '{1} Hour|{2} O Clock',
         'minute'                => 'Minute',
         'second'                => 'Second',
         'title'                 => 'Title',

resources/lang/zh_CN/validation.php

@@ -121,10 +121,10 @@ return [
         'password'              => '密码',
         'password_confirmation' => '确认密码',
         'phone'                 => '电话',
-        'day'                   => '天',
+        'day'                   => '{1} 天|{2} 日',
         'month'                 => '月',
         'year'                  => '年',
-        'hour'                  => '时',
+        'hour'                  => '{1} 时|{2} 点',
         'minute'                => '分',
         'second'                => '秒',
         'title'                 => '标题',

resources/views/admin/logs/userMonitor.blade.php

@@ -26,106 +26,76 @@
     </div>
 @endsection
 @section('javascript')
-    <script src="/assets/global/vendor/chart-js/Chart.min.js"></script>
+    <script src="/assets/global/vendor/chart-js/chart.min.js"></script>
     <script>
-        const dailyChart = new Chart(document.getElementById('dailyChart').getContext('2d'), {
-            type: 'line',
-            data: {
-                labels: {{$dayHours}},
-                datasets: [
-                    {
-                        fill: true,
-                        backgroundColor: 'rgba(98, 168, 234, .1)',
-                        borderColor: Config.colors('primary', 600),
-                        pointRadius: 4,
-                        borderDashOffset: 2,
-                        pointBorderColor: '#fff',
-                        pointBackgroundColor: Config.colors('primary', 600),
-                        pointHoverBackgroundColor: '#fff',
-                        pointHoverBorderColor: Config.colors('primary', 600),
-                        data: {{$trafficHourly}},
-                    }],
-            },
-            options: {
-                legend: {
-                    display: false,
-                },
+        function common_options(tail) {
+            return {
                 responsive: true,
                 scales: {
-                    xAxes: [
-                        {
-                            display: true,
-                            scaleLabel: {
-                                display: true,
-                                labelString: '小时',
+                    x: {
+                        ticks: {
+                            callback: function(value) {
+                                return this.getLabelForValue(value) + tail;
                             },
-                        }],
-                    yAxes: [
-                        {
-                            display: true,
-                            ticks: {
-                                beginAtZero: true,
-                                userCallback: function(tick) {
-                                    return tick.toString() + ' GB';
-                                },
+                        },
+                        grid: {
+                            display: false,
+                        },
+                    },
+                    y: {
+                        ticks: {
+                            callback: function(value) {
+                                return this.getLabelForValue(value) + ' GB';
                             },
-                            scaleLabel: {
-                                display: true,
-                                labelString: '{{trans('user.traffic_logs.24hours')}}',
+                        },
+                        grid: {
+                            display: false,
+                        },
+                        min: 0,
+                    },
+
+                },
+                plugins: {
+                    legend: false,
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                        callbacks: {
+                            title: function(context) {
+                                return context[0].label + tail;
+                            },
+                            label: function(context) {
+                                return context.parsed.y + ' GB';
                             },
-                        }],
+                        },
+                    },
                 },
-            },
-        });
+            };
+        }
 
-        const monthlyChart = new Chart(document.getElementById('monthlyChart').getContext('2d'), {
-            type: 'line',
-            data: {
-                labels: {{$monthDays}},
+        function datasets(label, data) {
+            return {
+                labels: label,
                 datasets: [
                     {
-                        fill: true,
-                        backgroundColor: 'rgba(98, 168, 234, .1)',
-                        borderColor: Config.colors('primary', 600),
-                        pointRadius: 4,
-                        borderDashOffset: 2,
-                        pointBorderColor: '#fff',
-                        pointBackgroundColor: Config.colors('primary', 600),
-                        pointHoverBackgroundColor: '#fff',
-                        pointHoverBorderColor: Config.colors('primary', 600),
-                        data: {{$trafficDaily}},
+                        backgroundColor: 'rgba(184, 215, 255)',
+                        borderColor: 'rgba(184, 215, 255)',
+                        data: data,
+                        tension: 0.4,
                     }],
-            },
-            options: {
-                legend: {
-                    display: false,
-                },
-                responsive: true,
-                scales: {
-                    xAxes: [
-                        {
-                            display: true,
-                            scaleLabel: {
-                                display: true,
-                                labelString: '天',
-                            },
-                        }],
-                    yAxes: [
-                        {
-                            display: true,
-                            ticks: {
-                                beginAtZero: true,
-                                userCallback: function(tick) {
-                                    return tick.toString() + ' GB';
-                                },
-                            },
-                            scaleLabel: {
-                                display: true,
-                                labelString: '{{trans('user.traffic_logs.30days')}}',
-                            },
-                        }],
-                },
-            },
+            };
+        }
+
+        new Chart(document.getElementById('dailyChart'), {
+            type: 'line',
+            data: datasets(@json($dayHours), @json($trafficHourly)),
+            options: common_options(' {{trans_choice('validation.attributes.hour', 2)}}'),
+        });
+
+        new Chart(document.getElementById('monthlyChart'), {
+            type: 'line',
+            data: datasets(@json($monthDays), @json($trafficDaily)),
+            options: common_options(' {{trans_choice('validation.attributes.day', 2)}}'),
         });
     </script>
 @endsection

resources/views/admin/node/monitor.blade.php

@@ -28,100 +28,76 @@
     </div>
 @endsection
 @section('javascript')
-    <script src="/assets/global/vendor/chart-js/Chart.min.js"></script>
+    <script src="/assets/global/vendor/chart-js/chart.min.js"></script>
     <script>
-        const dailyChart = new Chart(document.getElementById('dailyChart').getContext('2d'), {
-            type: 'line',
-            data: {
-                labels: {{$dayHours}},
-                datasets: [
-                    {
-                        fill: true,
-                        backgroundColor: 'rgba(98, 168, 234, .1)',
-                        borderColor: Config.colors('primary', 600),
-                        pointRadius: 4,
-                        borderDashOffset: 2,
-                        pointBorderColor: '#fff',
-                        pointBackgroundColor: Config.colors('primary', 600),
-                        pointHoverBackgroundColor: '#fff',
-                        pointHoverBorderColor: Config.colors('primary', 600),
-                        data: {{$trafficHourly}},
-                    }],
-            },
-            options: {
-                legend: {
-                    display: false,
-                },
+        function common_options(tail) {
+            return {
                 responsive: true,
                 scales: {
-                    xAxes: [
-                        {
-                            display: true,
-                            scaleLabel: {
-                                display: true,
-                                labelString: '小时',
+                    x: {
+                        ticks: {
+                            callback: function(value) {
+                                return this.getLabelForValue(value) + tail;
                             },
-                        }],
-                    yAxes: [
-                        {
-                            display: true,
-                            ticks: {
-                                beginAtZero: true,
+                        },
+                        grid: {
+                            display: false,
+                        },
+                    },
+                    y: {
+                        ticks: {
+                            callback: function(value) {
+                                return this.getLabelForValue(value) + ' GB';
                             },
-                            scaleLabel: {
-                                display: true,
-                                labelString: '{{trans('user.traffic_logs.24hours')}}',
+                        },
+                        grid: {
+                            display: false,
+                        },
+                        min: 0,
+                    },
+
+                },
+                plugins: {
+                    legend: false,
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                        callbacks: {
+                            title: function(context) {
+                                return context[0].label + tail;
+                            },
+                            label: function(context) {
+                                return context.parsed.y + ' GB';
                             },
-                        }],
+                        },
+                    },
                 },
-            },
-        });
+            };
+        }
 
-        const monthlyChart = new Chart(document.getElementById('monthlyChart').getContext('2d'), {
-            type: 'line',
-            data: {
-                labels: {{$monthDays}},
+        function datasets(label, data) {
+            return {
+                labels: label,
                 datasets: [
                     {
-                        fill: true,
-                        backgroundColor: 'rgba(98, 168, 234, .1)',
-                        borderColor: Config.colors('primary', 600),
-                        pointRadius: 4,
-                        borderDashOffset: 2,
-                        pointBorderColor: '#fff',
-                        pointBackgroundColor: Config.colors('primary', 600),
-                        pointHoverBackgroundColor: '#fff',
-                        pointHoverBorderColor: Config.colors('primary', 600),
-                        data: {{$trafficDaily}},
+                        backgroundColor: 'rgba(184, 215, 255)',
+                        borderColor: 'rgba(184, 215, 255)',
+                        data: data,
+                        tension: 0.4,
                     }],
-            },
-            options: {
-                legend: {
-                    display: false,
-                },
-                responsive: true,
-                scales: {
-                    xAxes: [
-                        {
-                            display: true,
-                            scaleLabel: {
-                                display: true,
-                                labelString: '天',
-                            },
-                        }],
-                    yAxes: [
-                        {
-                            display: true,
-                            ticks: {
-                                beginAtZero: true,
-                            },
-                            scaleLabel: {
-                                display: true,
-                                labelString: '{{trans('user.traffic_logs.30days')}}',
-                            },
-                        }],
-                },
-            },
+            };
+        }
+
+        new Chart(document.getElementById('dailyChart'), {
+            type: 'line',
+            data: datasets(@json($dayHours), @json($trafficHourly)),
+            options: common_options(' {{trans_choice('validation.attributes.hour', 2)}}'),
+        });
+
+        new Chart(document.getElementById('monthlyChart'), {
+            type: 'line',
+            data: datasets(@json($monthDays), @json($trafficDaily)),
+            options: common_options(' {{trans_choice('validation.attributes.day', 2)}}'),
         });
     </script>
 @endsection

resources/views/admin/report/accounting.blade.php

@@ -1,29 +1,4 @@
 @extends('admin.layouts')
-@section('css')
-    <link rel="stylesheet" href="/assets/global/vendor/chartist/chartist.min.css">
-    <style>
-        #widgetLinearea .ct-label.ct-vertical, #widgetLinearea .ct-label.ct-horizontal {
-            font-size: 14px;
-        }
-
-        #widgetLinearea .ct-area {
-            fill-opacity: 1;
-        }
-
-        #widgetLinearea .ct-series.ct-series-a .ct-area {
-            fill: #b8d7ff;
-        }
-
-        #widgetLinearea .ct-series.ct-series-b .ct-area {
-            fill: #92f0e6;
-        }
-
-        #widgetLinearea ul .icon {
-            vertical-align: text-bottom;
-        }
-
-    </style>
-@endsection
 @section('content')
     <div class="page-content container" id="widgetLinearea">
         <div class="card card-shadow">
@@ -33,15 +8,7 @@
                         <div class="blue-grey-700 font-size-26 font-weight-500">月流水账簿</div>
                     </div>
                 </div>
-                <div class="days mb-30" style="height:270px;"></div>
-                <ul class="list-inline text-center mb-0">
-                    <li class="list-inline-item">
-                        <i class="icon wb-large-point blue-200 mr-10" aria-hidden="true"></i> 本月
-                    </li>
-                    <li class="list-inline-item ml-35">
-                        <i class="icon wb-large-point teal-200 mr-10" aria-hidden="true"></i> 上月
-                    </li>
-                </ul>
+                <canvas id="days"></canvas>
             </div>
         </div>
         <div class="card card-shadow">
@@ -51,15 +18,7 @@
                         <div class="blue-grey-700 font-size-26 font-weight-500">年流水账簿</div>
                     </div>
                 </div>
-                <div class="month mb-30" style="height:270px;"></div>
-                <ul class="list-inline text-center mb-0">
-                    <li class="list-inline-item">
-                        <i class="icon wb-large-point blue-200 mr-10" aria-hidden="true"></i> 今年
-                    </li>
-                    <li class="list-inline-item ml-35">
-                        <i class="icon wb-large-point teal-200 mr-10" aria-hidden="true"></i> 去年
-                    </li>
-                </ul>
+                <canvas id="months"></canvas>
             </div>
         </div>
         <div class="card card-shadow">
@@ -69,71 +28,116 @@
                         <div class="blue-grey-700 font-size-26 font-weight-500">历史流水账簿</div>
                     </div>
                 </div>
-                <div class="year mb-30" style="height:270px;"></div>
+                <canvas id="years"></canvas>
             </div>
         </div>
     </div>
 @endsection
 @section('javascript')
-    <script src="/assets/global/vendor/chartist/chartist.min.js"></script>
+    <script src="/assets/global/vendor/chart-js/chart.min.js"></script>
     <script type="text/javascript">
-        new Chartist.Line('#widgetLinearea .days', {
-            labels: @json($data['days']),
-            series: [@json($data['currentMonth']), @json($data['lastMonth'])],
-        }, {
-            low: 0,
-            showArea: true,
-            showPoint: false,
-            showLine: false,
-            fullWidth: true,
-            chartPadding: {top: 0, right: 10, bottom: 0, left: 20},
-            axisX: {
-                showGrid: false,
-                labelOffset: {x: -14, y: 0},
+        function label_callbacks(tail) {
+            return {
+                mode: 'index',
+                intersect: false,
+                callbacks: {
+                    title: function(context) {
+                        return context[0].label + tail;
+                    },
+                    label: function(context) {
+                        let label = context.dataset.label || '';
+
+                        if (label) {
+                            label += ': ';
+                        }
+                        if (context.parsed.y !== null) {
+                            label += new Intl.NumberFormat('ch-CN', {style: 'currency', currency: 'CNY'}).format(context.parsed.y);
+                        }
+                        return label;
+                    },
+                },
+            };
+        }
+
+        const common_options = {
+            plugins: {
+                responsive: true,
+                legend: {
+                    labels: {
+                        padding: 20,
+                        usePointStyle: true,
+                        pointStyle: 'circle',
+                        font: {size: 14},
+                    },
+                },
+                tooltip: label_callbacks(' 月'),
             },
-            axisY: {
-                labelOffset: {x: -10, y: 0},
-                labelInterpolationFnc: function labelInterpolationFnc(num) {return num % 1 === 0 ? num : false;},
+        };
+
+        function area_a(label, data) {
+            return {
+                label: label,
+                backgroundColor: 'rgba(184, 215, 255)',
+                borderColor: 'rgba(184, 215, 255)',
+                data: data,
+                fill: {
+                    target: 'origin',
+                    above: 'rgba(184, 215, 255, 0.5)',
+                },
+                tension: 0.4,
+            };
+        }
+
+        function area_b(label, data) {
+            return {
+                label: label,
+                backgroundColor: 'rgba(146, 240, 230)',
+                borderColor: 'rgba(146, 240, 230)',
+                data: data,
+                fill: {
+                    target: 'origin',
+                    above: 'rgba(146, 240, 230, 0.5)',
+                },
+                tension: 0.4,
+            };
+        }
+
+        new Chart(document.getElementById('days'), {
+            type: 'line',
+            data: {
+                labels: @json($data['days']),
+                datasets: [area_a(' 本 月 ',@json($data['currentYear'])), area_b(' 上 月 ',@json($data['lastMonth']))],
             },
+            options: common_options,
         });
 
-        new Chartist.Line('#widgetLinearea .month', {
-            labels: @json($data['years']),
-            series: [@json($data['currentYear']), @json($data['lastYear'])],
-        }, {
-            low: 0,
-            showArea: true,
-            showPoint: false,
-            showLine: false,
-            fullWidth: true,
-            chartPadding: {top: 0, right: 10, bottom: 0, left: 20},
-            axisX: {
-                showGrid: false,
-                labelOffset: {x: -14, y: 0},
-            },
-            axisY: {
-                labelOffset: {x: -10, y: 0},
-                labelInterpolationFnc: function labelInterpolationFnc(num) {return num % 1 === 0 ? num : false;},
+        new Chart(document.getElementById('months'), {
+            type: 'line',
+            data: {
+                labels: @json($data['years']),
+                datasets: [area_a(' 今 年 ',@json($data['currentYear'])), area_b(' 去 年 ',@json($data['lastYear']))],
             },
+            options: common_options,
         });
 
-        new Chartist.Line('#widgetLinearea .year', {
-            labels: @json(array_keys($data['ordersByYear'])),
-            series: [@json(array_values($data['ordersByYear']))],
-        }, {
-            low: 0,
-            showArea: true,
-            showPoint: false,
-            showLine: false,
-            fullWidth: true,
-            chartPadding: {top: 0, right: 20, bottom: 0, left: 20},
-            axisX: {
-                showGrid: false,
-                labelOffset: {x: -14, y: 0},
+        new Chart(document.getElementById('years'), {
+            type: 'line',
+            data: {
+                labels: @json(array_keys($data['ordersByYear'])),
+                datasets: [
+                    {
+                        backgroundColor: 'rgba(184, 215, 255)',
+                        borderColor: 'rgba(184, 215, 255)',
+                        data: @json(array_values($data['ordersByYear'])),
+                        fill: {target: 'origin'},
+                        tension: 0.4,
+                    }],
             },
-            axisY: {
-                labelOffset: {x: -10, y: 0},
-                labelInterpolationFnc: function labelInterpolationFnc(num) {return num % 1 === 0 ? num : false;},
+            options: {
+                plugins: {
+                    legend: false,
+                    tooltip: label_callbacks(' 年'),
+                },
             },
         });
     </script>

resources/views/auth/maintenance.blade.php

@@ -23,8 +23,8 @@
             const hours = Math.floor(distance % 86400000 / 3600000);
             const minutes = Math.floor(distance % 3600000 / 60000);
             const seconds = Math.floor(distance % 60000 / 1000);
-            document.getElementById('countdown').innerHTML = '<h2>' + days + ' <span> {{trans('validation.attributes.day')}} </span>: ' +
-                hours + ' <span>{{trans('validation.attributes.hour')}}</span>: ' + minutes + ' <span>{{trans('validation.attributes.minute')}} </span>: ' +
+            document.getElementById('countdown').innerHTML = '<h2>' + days + ' <span> {{trans_choice('validation.attributes.day', 1)}} </span>: ' +
+                hours + ' <span>{{trans_choice('validation.attributes.hour', 1)}}</span>: ' + minutes + ' <span>{{trans('validation.attributes.minute')}} </span>: ' +
                 seconds + '<span> {{trans('validation.attributes.second')}}</span> </h2>';
             if (distance <= 0) {
                 clearInterval(x);

resources/views/user/buy.blade.php

@@ -20,7 +20,7 @@
                         <tr>
                             <td class="text-middle">{{$goods->name}} </td>
                             <td>{{trans('common.available_date')}}
-                                <strong>{{$goods->type === 1? $dataPlusDays:$goods->days}} {{trans('validation.attributes.day')}}</strong>
+                                <strong>{{$goods->type === 1? $dataPlusDays:$goods->days}} {{trans_choice('validation.attributes.day', 1)}}</strong>
                                 <br>
                                 <strong>{{$goods->traffic_label}}</strong> {{trans('user.attribute.data')}}
                                 <br>

resources/views/user/index.blade.php

@@ -93,7 +93,7 @@
                         <span class="font-weight-400">{{trans('user.account.time')}}</span>
                         <div class="content-text text-center mb-0">
                             @if($remainDays !== -1)
-                                <span class="font-size-40 font-weight-100">{{$remainDays.' '.trans('validation.attributes.day')}}</span>
+                                <span class="font-size-40 font-weight-100">{{$remainDays.' '.trans_choice('validation.attributes.day', 1)}}</span>
                                 <p class="blue-grey-500 font-weight-300 m-0">{{$expireTime}}</p>
                             @else
                                 <span class="font-size-40 font-weight-100">{{trans('user.status.expired')}}</span>
@@ -249,7 +249,7 @@
                                     <ul class="nav nav-pills" role="tablist">
                                         <li class="nav-item">
                                             <a class="nav-link active" data-toggle="tab" href="#daily" aria-controls="daily" role="tab" aria-expanded="true"
-                                               aria-selected="false">{{trans('validation.attributes.day')}}</a>
+                                               aria-selected="false">{{trans_choice('validation.attributes.day', 1)}}</a>
                                         </li>
                                         <li class="nav-item">
                                             <a class="nav-link" data-toggle="tab" href="#monthly" aria-controls="monthly" role="tab"
@@ -280,7 +280,7 @@
     <script src="/assets/custom/clipboardjs/clipboard.min.js"></script>
     <script src="/assets/global/vendor/aspieprogress/jquery-asPieProgress.min.js"></script>
     <script src="/assets/global/vendor/matchheight/jquery.matchHeight-min.js"></script>
-    <script src="/assets/global/vendor/chart-js/Chart.min.js"></script>
+    <script src="/assets/global/vendor/chart-js/chart.min.js"></script>
     <script src="/assets/global/vendor/bootstrap-select/bootstrap-select.min.js"></script>
     <script src="/assets/global/js/Plugin/aspieprogress.js"></script>
     <script src="/assets/global/js/Plugin/matchheight.js"></script>
@@ -367,104 +367,74 @@
             });
         }
 
-        const dailyChart = new Chart(document.getElementById('dailyChart').getContext('2d'), {
-            type: 'line',
-            data: {
-                labels: {{$dayHours}},
-                datasets: [
-                    {
-                        fill: true,
-                        backgroundColor: 'rgba(98, 168, 234, .1)',
-                        borderColor: Config.colors('primary', 600),
-                        pointRadius: 4,
-                        borderDashOffset: 2,
-                        pointBorderColor: '#fff',
-                        pointBackgroundColor: Config.colors('primary', 600),
-                        pointHoverBackgroundColor: '#fff',
-                        pointHoverBorderColor: Config.colors('primary', 600),
-                        data: {{$trafficHourly}},
-                    }],
-            },
-            options: {
-                legend: {
-                    display: false,
-                },
+        function common_options(tail) {
+            return {
                 responsive: true,
                 scales: {
-                    xAxes: [
-                        {
-                            display: true,
-                            scaleLabel: {
-                                display: true,
-                                labelString: '{{trans('validation.attributes.hour')}}',
+                    x: {
+                        ticks: {
+                            callback: function(value) {
+                                return this.getLabelForValue(value) + tail;
                             },
-                        }],
-                    yAxes: [
-                        {
-                            display: true,
-                            ticks: {
-                                beginAtZero: true,
-                                userCallback: function(tick) {
-                                    return tick.toString() + ' GB';
-                                },
+                        },
+                        grid: {
+                            display: false,
+                        },
+                    },
+                    y: {
+                        ticks: {
+                            callback: function(value) {
+                                return this.getLabelForValue(value) + ' GB';
                             },
-                            scaleLabel: {
-                                display: true,
-                                labelString: '{{trans('user.traffic_logs.24hours')}}',
+                        },
+                        grid: {
+                            display: false,
+                        },
+                        min: 0,
+                    },
+
+                },
+                plugins: {
+                    legend: false,
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                        callbacks: {
+                            title: function(context) {
+                                return context[0].label + tail;
                             },
-                        }],
+                            label: function(context) {
+                                return context.parsed.y + ' GB';
+                            },
+                        },
+                    },
                 },
-            },
-        });
+            };
+        }
 
-        const monthlyChart = new Chart(document.getElementById('monthlyChart').getContext('2d'), {
-            type: 'line',
-            data: {
-                labels: {{$monthDays}},
+        function datasets(label, data) {
+            return {
+                labels: label,
                 datasets: [
                     {
-                        fill: true,
-                        backgroundColor: 'rgba(98, 168, 234, .1)',
-                        borderColor: Config.colors('primary', 600),
-                        pointRadius: 4,
-                        borderDashOffset: 2,
-                        pointBorderColor: '#fff',
-                        pointBackgroundColor: Config.colors('primary', 600),
-                        pointHoverBackgroundColor: '#fff',
-                        pointHoverBorderColor: Config.colors('primary', 600),
-                        data: {{$trafficDaily}},
+                        backgroundColor: 'rgba(184, 215, 255)',
+                        borderColor: 'rgba(184, 215, 255)',
+                        data: data,
+                        tension: 0.4,
                     }],
-            },
-            options: {
-                legend: {
-                    display: false,
-                },
-                responsive: true,
-                scales: {
-                    xAxes: [
-                        {
-                            display: true,
-                            scaleLabel: {
-                                display: true,
-                                labelString: '{{trans('validation.attributes.day')}}',
-                            },
-                        }],
-                    yAxes: [
-                        {
-                            display: true,
-                            ticks: {
-                                beginAtZero: true,
-                                userCallback: function(tick) {
-                                    return tick.toString() + ' GB';
-                                },
-                            },
-                            scaleLabel: {
-                                display: true,
-                                labelString: '{{trans('user.traffic_logs.30days')}}',
-                            },
-                        }],
-                },
-            },
+            };
+        }
+
+        new Chart(document.getElementById('dailyChart'), {
+            type: 'line',
+            data: datasets(@json($dayHours), @json($trafficHourly)),
+            options: common_options(' {{trans_choice('validation.attributes.hour', 2)}}'),
+        });
+
+        new Chart(document.getElementById('monthlyChart'), {
+            type: 'line',
+            data: datasets(@json($monthDays), @json($trafficDaily)),
+            options: common_options(' {{trans_choice('validation.attributes.day', 2)}}'),
         });
 
         @if($banedTime)
@@ -475,7 +445,7 @@
             const hours = Math.floor(distance % 86400000 / 3600000);
             const minutes = Math.floor((distance % 3600000) / 60000);
             const seconds = Math.floor((distance % 60000) / 1000);
-            document.getElementById('countdown').innerHTML = hours + '{{trans('validation.attributes.hour')}} ' + minutes
+            document.getElementById('countdown').innerHTML = hours + '{{trans_choice('validation.attributes.hour', 1)}} ' + minutes
                 + '{{trans('validation.attributes.minute')}} ' + seconds + '{{trans('validation.attributes.second')}}';
             if (distance <= 0) {
                 clearInterval(x);

resources/views/user/invoiceDetail.blade.php

@@ -45,7 +45,7 @@
                             <td>
                                 @if($order->goods)
                                     {{trans('common.available_date')}}
-                                    <code>{{$order->goods->days}}</code> {{trans('validation.attributes.day')}}
+                                    <code>{{$order->goods->days}}</code> {{trans_choice('validation.attributes.day', 1)}}
                                     <br/>
                                     @if($order->goods->type === 2)
                                         <code>{{$order->goods->traffic_label}}</code>
@@ -54,7 +54,7 @@
                                         <code>{{$order->goods->traffic_label}}</code>
                                         {{trans('user.attribute.data')}}/
                                         <code>{{$order->goods->days}}</code>
-                                        {{trans('validation.attributes.day')}}
+                                        {{trans_choice('validation.attributes.day', 1)}}
                                     @endif
                                 @else
                                     {{trans('user.recharge_credit')}}

resources/views/user/payment.blade.php

@@ -17,7 +17,7 @@
                             <li class="list-group-item">{{trans('user.shop.service').'：'.$name}}</li>
                             <li class="list-group-item">{{trans('user.shop.price').'：¥'.$payment->amount}}</li>
                             @if($days !== 0)
-                                <li class="list-group-item">{{trans('common.available_date').'：'.$days.trans('validation.attributes.day')}}</li>
+                                <li class="list-group-item">{{trans('common.available_date').'：'.$days.trans_choice('validation.attributes.day', 1)}}</li>
                             @endif
                             <li class="list-group-item"> {!! trans('user.payment.close_tips', ['minutes' => config('tasks.close.order')]) !!}</li>
                         </ul>

resources/views/user/services.blade.php

@@ -64,7 +64,7 @@
                                                 <span class="pricing-currency">¥</span>
                                                 <span class="pricing-amount">{{$goods->price}}</span>
                                                 @if($goods->type === 2)
-                                                    <span class="pricing-period">/ {{$goods->days.trans('validation.attributes.day')}}</span>
+                                                    <span class="pricing-period">/ {{$goods->days.trans_choice('validation.attributes.day', 1)}}</span>
                                                 @endif
                                             </div>
                                             @if($goods->info)
@@ -74,7 +74,7 @@
                                         <ul class="pricing-features">
                                             <li>
                                                 <strong>{{$goods->traffic_label}}</strong>{{trans('user.attribute.data')}}
-                                                {!!$goods->type === 1? ' <code>'.$dataPlusDays.'</code> '.trans('validation.attributes.day'):'/'.trans('validation.attributes.month')!!}
+                                                {!!$goods->type === 1? ' <code>'.$dataPlusDays.'</code> '.trans_choice('validation.attributes.day', 1):'/'.trans('validation.attributes.month')!!}
                                             </li>
                                             <li>
                                                 {!!trans('user.service.node_count', ['num' => Auth::user()->nodes()->where('level', '<=', $goods->level)->count()])!!}

resources/views/user/stripe-checkout.blade.php

@@ -14,6 +14,5 @@
     <script>
         let stripe = Stripe('{{ sysConfig('stripe_public_key') }}');
         let redirectData = stripe.redirectToCheckout({sessionId: '{{ $session_id  }}'});
-        console.log(redirectData);
     </script>
 @endsection