@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDPieChart.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/*

     Created by Hassan Steven Compton.
     
     March 7, 2024.

*/
import * as React from "react";
import { useState } from 'react';
import { Pie } from "react-chartjs-2";
import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, Title, registerables } from "chart.js";
ChartJS.register.apply(ChartJS, _toConsumableArray(registerables));
var percentagePlugin = {
  id: 'percentagePlugin',
  beforeDraw: function beforeDraw(chart, args, options) {
    var ctx = chart.ctx,
      data = chart.data;
    console.log(data);
    data.datasets.forEach(function (dataset, i) {
      chart.getDatasetMeta(i).data.forEach(function (element, index) {
        ctx.save();
        ctx.font = '16px Arial';
        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        var value = dataset.data[index];
        var dataSum = dataset.data.reduce(function (sum, val) {
          return sum + val;
        }, 0);
        var percentage = (value / dataSum * 100).toFixed(2) + '%';
        var position = element.tooltipPosition();
        ctx.fillText(percentage, position.x, position.y);
        ctx.restore();
      });
    });
  }
};
function HUDPieChart(_ref) {
  var pieConfigurationSettings = _ref.pieConfigurationSettings,
    pieItemHoverData = _ref.pieItemHoverData,
    pieData = _ref.pieData,
    pieOptions = _ref.pieOptions,
    _ref$displaysPercenta = _ref.displaysPercentage,
    displaysPercentage = _ref$displaysPercenta === void 0 ? false : _ref$displaysPercenta;
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    tooltipContent = _useState2[0],
    setTooltipContent = _useState2[1];
  var currentPieOptions = _objectSpread({
    plugins: displaysPercentage ? [percentagePlugin] : []
  }, pieOptions);
  var handleHover = function handleHover(event, chartElement) {
    if (chartElement.length) {
      var index = chartElement[0].index;
      var dataItem = pieItemHoverData[index];
      setTooltipContent({
        label: dataItem.type,
        data: [{
          name: 'Total',
          value: dataItem.total
        }]
      });
    } else {
      setTooltipContent(null);
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({}, pieConfigurationSettings)
  }, /*#__PURE__*/React.createElement(Pie, {
    data: pieData,
    options: currentPieOptions
  }));
}
export default HUDPieChart;