@smitch/fluid/lib/charts/ChartWrap.js

A lightweight, Tailwind-powered React/Next.js UI component library.

import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo, Suspense, lazy } from "react";
import { merge } from "../@utils/merge";
import { Chart as ChartJS, registerables } from "chart.js";
import { twMerge } from "tailwind-merge";
var LazyBubble = lazy(function () {
    return import("react-chartjs-2").then(function (module) { return ({ default: module.Bubble }); });
});
var LazyLine = lazy(function () { return import("react-chartjs-2").then(function (module) { return ({ default: module.Line }); }); });
var LazyBar = lazy(function () { return import("react-chartjs-2").then(function (module) { return ({ default: module.Bar }); }); });
var LazyPie = lazy(function () { return import("react-chartjs-2").then(function (module) { return ({ default: module.Pie }); }); });
var LazyDoughnut = lazy(function () {
    return import("react-chartjs-2").then(function (module) { return ({ default: module.Doughnut }); });
});
var LazyRadar = lazy(function () {
    return import("react-chartjs-2").then(function (module) { return ({ default: module.Radar }); });
});
var LazyPolarArea = lazy(function () {
    return import("react-chartjs-2").then(function (module) { return ({ default: module.PolarArea }); });
});
var LazyScatter = lazy(function () {
    return import("react-chartjs-2").then(function (module) { return ({ default: module.Scatter }); });
});
ChartJS.register.apply(ChartJS, registerables);
var aspects = {
    landscape: "aspect-[4/3]",
    portrait: "aspect-[3/4]",
    square: "aspect-square",
    auto: "aspect-auto",
};
var ChartWrap = function (_a) {
    var data = _a.data, options = _a.options, title = _a.title, legendposition = _a.legendposition, chartType = _a.chartType, _b = _a.aspect, aspect = _b === void 0 ? "auto" : _b, className = _a.className, style = _a.style;
    var aspectClasses = useMemo(function () { return aspects[aspect]; }, [aspect]);
    var defaultOptions = useMemo(function () {
        return {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: legendposition,
                },
                title: {
                    display: !!title,
                    text: title,
                },
            },
        };
    }, [legendposition, title]);
    var chartComponents = {
        bubble: LazyBubble,
        line: LazyLine,
        bar: LazyBar,
        pie: LazyPie,
        doughnut: LazyDoughnut,
        radar: LazyRadar,
        polarArea: LazyPolarArea,
        scatter: LazyScatter,
        mixed: LazyBar,
    };
    var ChartComponent = chartComponents[chartType];
    var combinedOptions = useMemo(function () {
        if (options)
            return merge(defaultOptions, options);
        return defaultOptions;
    }, [defaultOptions, options]);
    return (_jsx("figure", { className: twMerge("chart-wrap h-auto min-w-full ".concat(aspectClasses), className), children: _jsx(Suspense, { fallback: _jsx("div", { className: "text-center text-sm italic", children: "Loading Chart" }), children: _jsx(ChartComponent, { data: data, options: combinedOptions, title: title, legendposition: legendposition, style: style }) }) }));
};
export default ChartWrap;
//# sourceMappingURL=ChartWrap.js.map