HomeAccounting

1
<template>
2
    <div class="chart" v-show="visibility"></div>
3
</template>
4

5
<script>
6
    import Chart from 'c3';
7

8
    /**
9
     * todo: придумать генерацию уникальных классов для вывода графика
10
     * или на крайний случай передавать какой-то уникальный идентификатор с родителя
11
     * Как сейчас вроде все работает нормально
12
     */
13
    export default {
14
        name: "line-chart-component",
15
        props: {
16
            data: {
17
                default: {},
18
            },
19
            visibility: {
20
                type: Boolean,
21
                default: true,
22
            },
23
            chartType: {
24
                type: String,
25
                default: 'timeseries',
26
            }
27
        },
28
        data: () => ({
29

30
        }),
31
        methods: {
32
            chartGenerate() {
33
                Chart.generate({
34
                    bindto: '.chart',
35
                    data: {
36
                        x: 'x',
37
                        columns: this.data,
38
                    },
39
                    axis: {
40
                        x: {
41
                            type: this.chartType,
42
                            tick: {
43
                                format: '%d-%m-%Y'
44
                            }
45
                        }
46
                    }
47
                });
48
            }
49
        },
50
        mounted() {
51

52
        },
53
        computed: {
54

55
        },
56
        watch: {
57
            data() {
58
                this.chartGenerate();
59
            }
60
        }
61
    }
62
</script>
63

64
<style scoped>
65

66
</style>