芝麻web文件管理V1.00

编辑当前文件:/home/forge/stage.sksb.smartcon-survey.com/resources/js/chart.js

import Chart from "@toast-ui/chart";
window.ToastChart = Chart;

window.initPieChart = function (
    rootElement,
    title,
    values,
    isQuestion = false
) {
    let labels = [
        {
            data: 0,
            name: "sehr zufrieden",
            color: "#4CAF50",
        },
        {
            data: 0,
            name: "zufrieden",
            color: "#8BC34A",
        },
        {
            data: 0,
            name: "teils/teils",
            color: "#FFEB3B",
        },
        {
            data: 0,
            name: "unzufrieden",
            color: "#FFC107",
        },
        {
            data: 0,
            name: "sehr unzufrieden",
            color: "#F44336",
        },
    ];
    if (isQuestion) {
        labels = [
            {
                data: 0,
                name: "stimme vollständig zu",
                color: "#4CAF50",
            },
            {
                data: 0,
                name: "stimme eher zu",
                color: "#8BC34A",
            },
            {
                data: 0,
                name: "teils/teils",
                color: "#FFEB3B",
            },
            {
                data: 0,
                name: "stimme eher nicht zu",
                color: "#FFC107",
            },
            {
                data: 0,
                name: "stimme überhaupt nicht zu",
                color: "#F44336",
            },
        ];
    }

const data = {
        categories: [""],
        series: labels,
    };
    values.forEach((value, index) => {
        data.series[index].data = value > 0 ? value : null;
    });

const options = {
        chart: {
            title: title,
            width: rootElement.parentElement.offsetWidth,
            height: rootElement.parentElement.offsetHeight,
        },
        lang: {
            noData: "Keine Daten",
        },
        usageStatistics: false,
        series: {
            dataLabels: {
                visible: true,
                formatter: (value) => Math.round(parseFloat(value)) + "%",
            },
        },
        legend: {
            align: "bottom",
            showCheckbox: false,
            visible: true,
        },
        tooltip: {
            offsetX: 0,
            offsetY: -30,
            template: (model) => {
                const data = model.data[0];
                const label =
                    data.label.length > 20
                        ? data.label.replace("/", "/<br>")
                        : data.label;

return `
          <div class="absolute flex bg-gray-100 text-gray-600 text-xs font-semibold p-2 rounded-lg shadow-xl" style="border-bottom:4px solid ${
              data.color
          };">
            <div>${label}</div>
            <div class="pl-2">${Math.round(
                parseFloat(data.percentValue)
            )}%</div>
          </div>
        `;
            },
            transition: "",
        },
        theme: {
            noData: {
                fontFamily: "Inter",
                fontWeight: "bold",
            },
            series: {
                colors: data.series.map((sereItem) => sereItem.color),
                dataLabels: {
                    fontFamily: "Inter",
                    useSeriesColor: false,
                    color: "#3d3d3d",
                    callout: {
                        lineWidth: 3,
                        useSeriesColor: true,
                    },
                    pieSeriesName: {
                        useSeriesColor: true,
                        fontFamily: "Inter",
                        fontSize: 5,
                        textBubble: {
                            visible: false,
                            paddingX: 1,
                            paddingY: 1,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 0,
                        },
                    },
                },
            },
        },
    };

window.pieChart = ToastChart.pieChart({
        el: rootElement,
        data: data,
        options: options,
    });

window.addEventListener("resize", function () {
        window.pieChart.resize({
            width: rootElement.parentElement.offsetWidth,
            height: rootElement.parentElement.offsetHeight,
        });
    });
};

window.initLineChart = function (rootElement, title, values, last10Days) {
    const categories = values.map((item) => item.label);
    const data = {
        categories: categories,
        series: [
            {
                data: values.map((item) => item.value),
                name: "(sehr) zufriedene Mitarbeiter (Top 2)",
            },
            {
                data: [
                    {
                        x: categories[categories.length - 1],
                        y: last10Days,
                    },
                ],
                name: "Letzte 10 Tage",
            },
        ],
    };

window.addEventListener("resize", function () {
        chr.resize({
            width: rootElement.parentElement.offsetWidth,
            height: rootElement.parentElement.offsetHeight,
        });
    });
};

window.initBarSplitChart = function (rootElement, title, values, categories) {
    const data = {
        categories,
        series: [
            {
                name: "Top2 in %",
                data: values,
            },
        ],
    };

const options = {
        chart: {
            title: title,
            width: rootElement.parentElement.offsetWidth,
            height: rootElement.parentElement.offsetHeight,
        },
        yAxis: {
            scale: {
                min: 0,
                max: 100,
                stepSize: 10,
            },
        },
        lang: {
            noData: "Keine Daten",
        },
        theme: {
            series: {
                colors: ["#67AD5B"],
            },
        },
        usageStatistics: false,
        legend: {
            align: "bottom",
            showCheckbox: false,
            visible: true,
        },
    };

const chr = ToastChart.columnChart({
        el: rootElement,
        data: data,
        options: options,
    });