@etsoo/materialui/lib/cjs/LineChart.js

TypeScript Material-UI Implementation

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LineChart = LineChart;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
/**
 * Line chart
 * @param props Props
 * @returns Component
 */
function LineChart(props) {
    // Destruct
    const { data, options, subtitle, title } = props;
    // State
    const [LineType, setLineType] = react_1.default.useState();
    react_1.default.useEffect(() => {
        Promise.all([
            import("react-chartjs-2"),
            import("chart.js"),
            import("chartjs-plugin-datalabels")
        ]).then(([{ Line }, { Chart: ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
            // https://www.chartjs.org/docs/latest/getting-started/
            ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, ChartDataLabels // CommonJS says 'id' is missing
            );
            setLineType(Line);
        });
    }, []);
    return LineType == null ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : ((0, jsx_runtime_1.jsx)(LineType, { options: {
            scales: {
                x: {
                    ticks: {
                        display: false //this will remove only the label
                    }
                }
            },
            responsive: true,
            plugins: {
                datalabels: {
                    display: (context) => context.dataset.data.length <= 31,
                    align: "end"
                },
                legend: {
                    position: "top"
                },
                subtitle: subtitle ? { text: subtitle, display: true } : undefined,
                title: title
                    ? {
                        text: title,
                        display: true
                    }
                    : undefined
            },
            ...options
        }, data: data }));
}