import { __extends } from "tslib";
import * as React from 'react';
import { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';
import { Pie } from './Pie/Pie';
var getClassNames = classNamesFunction();
var PieChartBase = /** @class */ (function (_super) {
    __extends(PieChartBase, _super);
    function PieChartBase(props) {
        var _this = _super.call(this, props) || this;
        _this._emptyChartId = getId('_PieChart_empty');
        return _this;
    }
    PieChartBase.prototype.render = function () {
        var _a = this.props, data = _a.data, width = _a.width, height = _a.height, colors = _a.colors, chartTitle = _a.chartTitle;
        var _b = this.props, theme = _b.theme, className = _b.className, styles = _b.styles, culture = _b.culture;
        this._classNames = getClassNames(styles, {
            theme: theme,
            width: width,
            height: height,
            className: className,
        });
        var TEXT_MAX_WIDTH = 40;
        var TEXT_LINE_HEIGHT = 16;
        var PADDING = 4;
        /**
         * The radius for the pie chart is computed based on the space available inside the svg
         * after subtracting the max amount of space that can be used by the text in pie chart
         */
        var radius = Math.min(width - 2 * TEXT_MAX_WIDTH, height - 2 * TEXT_LINE_HEIGHT) / 2;
        var outerRadius = radius;
        return !this._isChartEmpty() ? (React.createElement("div", { className: this._classNames.root },
            this.props.chartTitle && React.createElement("p", { className: this._classNames.chartTitle }, this.props.chartTitle),
            React.createElement(Pie, { culture: culture, width: width + 2 * PADDING, height: height + 2 * PADDING, outerRadius: outerRadius, innerRadius: 1, data: data, colors: colors, chartTitle: chartTitle, theme: theme }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
    };
    PieChartBase.prototype._isChartEmpty = function () {
        return !(this.props.data && this.props.data.length > 0 && this.props.data.filter(function (item) { return item.y > 0; }).length > 0);
    };
    PieChartBase.defaultProps = {
        data: [],
        width: 600,
        height: 350,
    };
    return PieChartBase;
}(React.Component));
export { PieChartBase };
//# sourceMappingURL=PieChart.base.js.map