Как отфильтровать или заполнить по дате с условием в laravel и отображать в vue через fusionchart? - PullRequest
Новая
       36

Как отфильтровать или заполнить по дате с условием в laravel и отображать в vue через fusionchart?

0 голосов
/ 21 января 2020

Это очень сложно для меня, так как я не знаком с этими инструментами. У меня есть таблица teachers, schedules и checkers. То, что я хочу сделать, это когда я выбираю указанного c учителя в поле выбора, график будет заполнять его отсутствие за месяц. Например, если я нажму на отметку, график будет заполнять гистограмму и отображать его отсутствующие и нынешние дни, я даже не могу понять, как это сделать. Может кто-нибудь сказать мне, что я должен делать? Или какой-нибудь совет, если вы сталкиваетесь с этим типом процесса?

Так вот мои базы данных

Учителя 

+----+----------+-----------------+--------+---------------------+---------------------+------------+
| id | fullname | image           | course | created_at          | updated_at          | deleted_at |
+----+----------+-----------------+--------+---------------------+---------------------+------------+
|  1 | Vince    | 1579611802.jpeg | CCE    | 2020-01-21 13:03:24 | 2020-01-21 13:03:24 | NULL       |
|  2 | Mark     | 1579612315.jpeg | CHE    | 2020-01-21 13:11:55 | 2020-01-21 13:11:55 | NULL       |
+----+----------+-----------------+--------+---------------------+---------------------+------------+

Расписания 

+----+------------+------------+----------+-----------------+-----------+
| id | teacher_id | start_time | end_time | subject_code_id | day       |
+----+------------+------------+----------+-----------------+-----------+
|  1 |          1 | 10:30 PM   | 12:30 AM |               1 | M-T-W-T-F |
|  2 |          2 | 5:30 PM    | 6:30 PM  |               2 | M-T-W-T-F |
+----+------------+------------+----------+-----------------+-----------+

И шашки 

+----+-------------+---------+------------+---------+---------------------+------------+------------+
| id | schedule_id | user_id | remarks_id | status  | created_at          | updated_at | deleted_at |
+----+-------------+---------+------------+---------+---------------------+------------+------------+
|  1 |           1 |       1 |         12 | Round 1 | 2020-01-20 00:00:00 | NULL       | NULL       |
|  2 |           1 |       1 |         12 | Round 2 | 2020-01-20 00:00:00 | NULL       | NULL       |
|  3 |           2 |       1 |          9 | Round 1 | 2020-01-20 00:00:00 | NULL       | NULL       |
+----+-------------+---------+------------+---------+---------------------+------------+------------+

Обратите внимание, что remarks_id = 12 - это Absent

Также вот мой компонент 

<div id="chart-container">
        <fusioncharts :type="type" :width="width" :height="height"
          :dataFormat="dataFormat"  :dataSource=" dataSource ">
            </fusioncharts>
    </div>

И скрипт 

import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
export default {
    name: 'app',
    data() {
        return {
            users: [],
            type: "doughnut2d",
            renderAt: "chart-container",
            width: "550",
            height: "350",
            dataFormat: 'json',
            dataSource: {
                chart: {
                    "caption": "Absences", "theme": "fusion"
                }
                ,
                data: []
            },
        }
    },
    methods: {
          getdata(){
           axios.get('/getGraph')
            .then(({data})=>{
                for(let x in data){
                    this.dataSource.data.push({
                        "label": x,
                        "value": data[x].count
                    })
                }
            })
       }
    },
    created: function(){
       this.getdata();

    }
}
</script>

Я пробовал этот запрос для подсчета отсутствий 

  public function getGraph(){
        $ext = \DB::table('checkers')->distinct()->get();
        $grouped = $ext->groupBy('schedule_id')->map(function($item, $key) {
            return ['count' => collect($item)->count()];
        });
        return response()->json($grouped);
    }

Мой текущий вывод на данный момент enter image description here

PS: компонент graph отделен от dashboard в случае, если вам интересно, почему у меня там есть опция выбора, потому что она находится на моей панели, а не на графике. Я надеюсь, вы понимаете мою точку зрения. Большое спасибо.

...