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

A Next/React ui-component libray.

import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo, Suspense, lazy } from 'react';
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 }); });
});
var merge = require('deepmerge');
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;