@awsui/components-react/pie-chart/index.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign, __rest } from "tslib";
import React, { useCallback, useMemo, useState } from 'react';
import clsx from 'clsx';
import { scaleOrdinal } from 'd3-scale';
import { getBaseProps } from '../internal/base-component';
import { useTelemetry } from '../internal/hooks/use-telemetry';
import { useContainerQuery } from '../internal/hooks/container-queries';
import { useControllable } from '../internal/hooks/use-controllable';
import { categoryPalette } from '../internal/styles/colors';
import { fireNonCancelableEvent } from '../internal/events';
import { parseCssVariable } from '../internal/utils/dom';
import Legend from '../internal/components/chart-legend';
import Filter from '../internal/components/chart-filter';
import SpaceBetween from '../space-between';
import Box from '../box';
import InternalPieChart from './pie-chart';
import styles from './styles.css.js';
var PieChart = function PieChart(_a) {
    var _b;
    var _c = _a.variant, variant = _c === void 0 ? 'pie' : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, _e = _a.hideLegend, hideLegend = _e === void 0 ? false : _e, _f = _a.hideFilter, hideFilter = _f === void 0 ? false : _f, _g = _a.statusType, statusType = _g === void 0 ? 'finished' : _g, _h = _a.data, externalData = _h === void 0 ? [] : _h, i18nStrings = _a.i18nStrings, controlledHighlightedSegment = _a.highlightedSegment, controlledVisibleSegments = _a.visibleSegments, onHighlightChange = _a.onHighlightChange, onFilterChange = _a.onFilterChange, additionalFilters = _a.additionalFilters, legendTitle = _a.legendTitle, _j = _a.detailPopoverSize, detailPopoverSize = _j === void 0 ? 'medium' : _j, props = __rest(_a, ["variant", "size", "hideLegend", "hideFilter", "statusType", "data", "i18nStrings", "highlightedSegment", "visibleSegments", "onHighlightChange", "onFilterChange", "additionalFilters", "legendTitle", "detailPopoverSize"]);
    useTelemetry('PieChart');
    var baseProps = getBaseProps(props);
    var isEmpty = !externalData || externalData.length === 0;
    var containerAttr = __assign(__assign({}, baseProps), { className: clsx(baseProps.className, styles.root) });
    var _k = useContainerQuery(function (rect, prevWidth) {
        return prevWidth !== rect.width ? rect.width : prevWidth;
    }), containerWidth = _k[0], ref = _k[1];
    var data = useMemo(function () {
        var colors = scaleOrdinal(externalData.map(function (_, i) { return i; }), categoryPalette);
        return externalData.map(function (datum, i) { return ({
            index: i,
            color: parseCssVariable(datum.color || colors(i)),
            datum: datum
        }); });
    }, [externalData]);
    var _l = useControllable(controlledHighlightedSegment, onHighlightChange, null, {
        componentName: 'PieChart',
        controlledProp: 'highlightedSegment',
        changeHandler: 'onHighlightChange'
    }), highlightedSegment = _l[0], setHighlightedSegment = _l[1];
    var _m = useControllable(controlledVisibleSegments, onFilterChange, externalData, {
        componentName: 'PieChart',
        controlledProp: 'visibleSegments',
        changeHandler: 'onFilterChange'
    }), visibleSegments = _m[0], setVisibleSegments = _m[1];
    var _o = useState(null), pinnedSegment = _o[0], setPinnedSegment = _o[1];
    var actualHighlightedSegment = highlightedSegment || null;
    var visibleData = useMemo(function () { return data.filter(function (d) { return (visibleSegments === null || visibleSegments === void 0 ? void 0 : visibleSegments.indexOf(d.datum)) !== -1; }); }, [
        data,
        visibleSegments
    ]);
    var filterItems = data === null || data === void 0 ? void 0 : data.map(function (data) { return ({
        label: data.datum.title,
        color: data.color,
        type: 'rectangle',
        datum: data.datum
    }); });
    var legendItems = filterItems.filter(function (d) { return (visibleSegments === null || visibleSegments === void 0 ? void 0 : visibleSegments.indexOf(d.datum)) !== -1; });
    var highlightedLegendItem = useMemo(function () {
        if (!highlightedSegment) {
            return null;
        }
        var matches = legendItems.filter(function (item) { return item.datum === highlightedSegment; });
        return matches[0] || null;
    }, [legendItems, highlightedSegment]);
    var filterChange = useCallback(function (selectedSeries) {
        setVisibleSegments(selectedSeries);
        fireNonCancelableEvent(onFilterChange, {
            visibleSegments: selectedSeries
        });
    }, [setVisibleSegments, onFilterChange]);
    var onLegendHighlightChange = useCallback(function (segment) {
        if (pinnedSegment !== null) {
            return;
        }
        setHighlightedSegment(segment);
        fireNonCancelableEvent(onHighlightChange, {
            highlightedSegment: segment
        });
    }, [pinnedSegment, setHighlightedSegment, onHighlightChange]);
    return (React.createElement("div", __assign({}, containerAttr, { ref: ref }),
        statusType === 'finished' && !isEmpty && (React.createElement(Box, { className: styles['filter-container'], margin: { bottom: 'l' } },
            React.createElement(SpaceBetween, { size: "l", direction: "horizontal", className: clsx((_b = {},
                    _b[styles['has-default-filter']] = !hideFilter,
                    _b)) },
                !hideFilter && (React.createElement(Filter, { series: filterItems, onChange: filterChange, selectedSeries: visibleSegments, i18nStrings: i18nStrings })),
                additionalFilters))),
        React.createElement(InternalPieChart, __assign({}, props, { variant: variant, size: size, data: externalData, visibleData: visibleData, width: containerWidth || 0, statusType: statusType, hideLegend: hideLegend, hideFilter: hideFilter, additionalFilters: additionalFilters, i18nStrings: i18nStrings, onHighlightChange: onHighlightChange, highlightedSegment: actualHighlightedSegment, setHighlightedSegment: setHighlightedSegment, pinnedSegment: pinnedSegment, setPinnedSegment: setPinnedSegment, detailPopoverSize: detailPopoverSize })),
        !hideLegend && !isEmpty && statusType === 'finished' && (React.createElement(Box, { margin: { top: 'm' } },
            React.createElement(Legend, { series: legendItems, highlightedSeries: highlightedLegendItem, legendTitle: legendTitle, ariaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.legendAriaLabel, onHighlightChange: onLegendHighlightChange })))));
};
export default PieChart;