Medroco Web Report Wrapper

Bu proje, web raporlama uygulamaları için bir wrapper bileşeni sağlar. Aşağıdaki adımları takip ederek projeye entegre edebilirsiniz.

Kurulum

Yeni bir web raporlama uygulaması oluşturulacağı zaman şu adımlar uygulanmalıdır:

Projeyi oluştur

npm create vite@latest

Proje bilgilerini girin. (Vue 3 - JavaScript seç)

Proje klasörüne gir

cd my-vue-app

Bağımlılıkları yükle

npm install

Geliştirme sunucusunu başlat

npm run dev

Bu repodaki npm üzerinden paketi kur

npm install medroco-web-report-wrapper

Frontend framework olarak Vuetify kullan

npm install vuetify

npm install @mdi/font

Vuex Store kur

npm install vuex

Genel olarak kullanılan chart kütüphanesi

npm install vue-echarts

Kullanım

main.js dosyası örneği:

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

import vuetify from "./plugins/vuetify";
import store from "./store";

const app = createApp(App);

app.use(vuetify).use(store).mount("#app");

Örnek Kullanım

<template>
    <medroco-report-wrapper @dataReceived="dataReceived">
        <div v-if="reportPayload">
            <h1>Rapor Verisi:</h1>
            {{ reportPayload }}
        </div>
    </medroco-report-wrapper>
</template>

<script>
import { MedrocoReportWrapper } from "medroco-web-report-wrapper";
export default {
    components: { MedrocoReportWrapper },

    data() {
        return {
            reportPayload: null,
        };
    },

    methods: {
        dataReceived(payload) {
            this.reportPayload = payload;
        },
    },
};
</script>

vue-echarts ile oluşturulabilecek bir component örneği:

<template>
    <v-chart
        v-if="chartOption"
        class="chart fill-height w-full h-100"
        :option="chartOption"
    />
</template>

<script>
import { defineComponent } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { RadarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers"; // **Eksik olan Renderer'ı ekledik**

use([RadarChart, CanvasRenderer]);

export default defineComponent({
    components: { VChart },
    props: {
        jumps: {
            type: Array,
            required: true,
        },
    },
    data() {
        return {
            chartOption: null,
        };
    },
});
</script>