chart-unty-2035

График для статистики

Установка

npm install 

Создать файл chart.js в папки store

export default {
    namespaced: true,
    state: {
        date: '',
        apiPath: process.env.VUE_APP_STATISTICS_API_PATH ? process.env.VUE_APP_STATISTICS_API_PATH : '/api',
        app_token: process.env.VUE_STATISTICS_API_TOKEN,
        image_url: process.env.VUE_IMAGE_URL,
        info: {
            title: '',
            image: ''
        },
        table: []
    },
    getters: {
        getDate: state => state.date,
        getInfo: state => state.info,
        getTable: state => state.table,
        getImageUrl: state => state.image_url
    },
    mutations: {
        SetCumulativeUsers: (state, val) => {
            state.date = val.data.payload;
        },
        SetInfo: (state, val) => {
            let payload = val.data.payload
            state.info.title = payload.title;
            state.info.image = JSON.parse(payload.image);

            for (let i = 0; i < payload.sections.length; i++) {
                let array = {
                    title: payload.sections[i].title,
                    activityIndex: payload.sections[i].objects[0].activityIndex,
                    countUsers: payload.sections[i].objects[0].reaction.countUsers,
                    clicks: payload.sections[i].objects[0].reaction.clicks,
                    likes: payload.sections[i].objects[0].reaction.likes,
                    dislikes: payload.sections[i].objects[0].reaction.dislikes,
                    favourites: payload.sections[i].objects[0].reaction.favourites,
                }
                state.table.push(array)
            }
        },
    },
    actions: {
        LoadCumulativeUsers: async function (context, {uuid}) {
            console.log(uuid);
            let app_token = context.state.app_token;
            var response = await axios.get(context.state.apiPath + '/api/v1/collection/cumulative-users?uuid=' + uuid
                + '&app_token=' + app_token);
            context.commit('SetCumulativeUsers', response);
        },
        LoadInfo: async function (context, {uuid}) {
            console.log(uuid);
            let app_token = context.state.app_token;
            var response = await axios.get(context.state.apiPath + '/api/v1/collection/info?uuid=' + uuid
                + '&app_token=' + app_token);
            context.commit('SetInfo', response);
        },
    },
};

В основном файле store

import chart from './chart'

const store = () => new Vuex.Store({
     modules: {
         chart
     },
});

.env прописать переменную

VUE_APP_STATISTICS_API_PATH=http://stat.2035.local

На страницы

<template>
    <div>
        <Chart :uuid="uuid"></Chart>
    </div>
</template>

<script>
import Chart from 'chart-unty-2035/src/components/Chart.vue'
//let Chart = require('chart-unty-2035/src/main_int.js')
export default {
    components: {
        Chart
    },
    data() {
        return {
            uuid: '', //uuid подборки
            growths: '', //true - по наростающей / false - с убывание
            time : 1000 // Задержка в милисикундах для построения графика 
        }
    },
}
</script>