@actinc/dls/components/PieChart/index.js

Design Language System (DLS) for ACT & Encoura front-end projects.

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Grid from '@mui/material/Grid';
import { useTheme, useThemeProps } from '@mui/material/styles';
import clsx from 'clsx';
import numeral from 'numeral';
import React, { useMemo } from 'react';
import { Cell, Label, Legend, Pie, PieChart as RechartsPieChart, ResponsiveContainer, Tooltip, } from 'recharts';
import DEFAULT_CHART_COLORS from "../../constants/DEFAULT_CHART_COLORS";
import DLS_COMPONENT_NAMES from "../../constants/DLS_COMPONENT_NAMES";
import InnerPieComponent from './InnerPieComponent';
import { PieLegend } from './PieLegend';
import { StyledGridBody, StyledGridTitle, StyledTypography } from './styles';
export var DEFAULT_PIE_GAP_ANGLE = 1;
export var DEFAULT_PIE_MIN_ANGLE = 1;
/**
 * The existence of HighlightComponent will automatically push the Legend from inside the PieChart
 */
export var PieChart = function (inProps) {
    var _a = useThemeProps({ name: DLS_COMPONENT_NAMES.PIE_CHART, props: inProps }), chartLegendTextFontSize = _a.chartLegendTextFontSize, chartLegendTextFontSizeSmall = _a.chartLegendTextFontSizeSmall, children = _a.children, _b = _a.colors, colors = _b === void 0 ? [] : _b, CustomLegendIcon = _a.CustomLegendIcon, data = _a.data, height = _a.height, HighlightComponent = _a.HighlightComponent, legendProps = _a.legendProps, pieChartProps = _a.pieChartProps, pieProps = _a.pieProps, responsiveContainerProps = _a.responsiveContainerProps, titleProps = _a.titleProps, tooltipProps = _a.tooltipProps, variant = _a.variant, width = _a.width;
    var _c = useTheme(), palette = _c.palette, spacing = _c.spacing, typography = _c.typography;
    var _d = React.useState(null), activeIndex = _d[0], setActiveIndex = _d[1];
    var pieTotalValue = useMemo(function () { return data.reduce(function (acc, _a) {
        var value = _a.value;
        return acc + value;
    }, 0); }, [data]);
    var hasHighlight = !!HighlightComponent;
    var mouseEnter = function (_, hoveredIndex) {
        setActiveIndex(hoveredIndex);
    };
    var resetMouseEnter = function () {
        setActiveIndex(null);
    };
    return (_jsxs(Grid, { container: true, direction: "column", size: {
            xs: 12,
        }, spacing: 2, children: [titleProps && (_jsx(StyledGridTitle, { children: _jsx(StyledTypography, __assign({ align: "center", hasHighlight: hasHighlight, variantSize: variant }, titleProps, { className: clsx(titleProps.className && titleProps.className), children: titleProps.title })) })), _jsx(StyledGridBody, { children: _jsx(ResponsiveContainer, __assign({ debounce: 50, height: height || (variant ? 300 : 350), width: width || '100%' }, responsiveContainerProps, { children: _jsxs(RechartsPieChart, __assign({ margin: {
                            bottom: parseInt(String(spacing(1)), 10),
                            left: parseInt(String(spacing(1)), 10),
                            right: parseInt(String(spacing(1)), 10),
                            top: parseInt(String(spacing(1)), 10),
                        }, style: { fontFamily: typography.fontFamily, position: 'absolute' } }, pieChartProps, { children: [_jsxs(Pie, __assign({ data: data, dataKey: "value", innerRadius: "80%", minAngle: DEFAULT_PIE_MIN_ANGLE, onMouseEnter: mouseEnter, onMouseLeave: resetMouseEnter, outerRadius: "100%", paddingAngle: DEFAULT_PIE_GAP_ANGLE }, pieProps, { children: [data.map(function (_a, i) {
                                        var color = _a.color;
                                        return (_jsx(Cell, { fill: color ||
                                                colors[i] ||
                                                DEFAULT_CHART_COLORS[i] ||
                                                palette.grey[700], fillOpacity: activeIndex === null || activeIndex === i ? 1 : 0.4 }, "cell-".concat(i)));
                                    }), activeIndex !== null && HighlightComponent ? (_jsx(Label, { content: _jsx(InnerPieComponent, { HighlightComponent: HighlightComponent, payload: data[activeIndex], pieTotalValue: pieTotalValue }), position: "center" })) : null] })), _jsx(Legend, __assign({ align: data.length > 4 || hasHighlight ? 'right' : 'center', content: _jsx(PieLegend, { chartLegendTextFontSize: chartLegendTextFontSize, chartLegendTextFontSizeSmall: chartLegendTextFontSizeSmall, CustomLegendIcon: CustomLegendIcon, pieTotalValue: pieTotalValue, showAsSquare: (legendProps === null || legendProps === void 0 ? void 0 : legendProps.align) === 'right' && data.length > 3 }), layout: "vertical", onMouseEnter: mouseEnter, onMouseLeave: resetMouseEnter, verticalAlign: data.length > 6 ? 'top' : 'middle' }, legendProps)), _jsx(Tooltip, __assign({ formatter: function (v) { return numeral(v).format('0,0'); }, wrapperStyle: { outline: 'none' } }, tooltipProps)), children] })) })) })] }));
};
export default PieChart;
//# sourceMappingURL=index.js.map