@onesy/ui-react/PieChart/PieChart.js

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Line = _interopRequireDefault(require("../Line"));
var _Type = _interopRequireDefault(require("../Type"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _Chart = _interopRequireDefault(require("../Chart"));
var _Path = _interopRequireDefault(require("../Path"));
var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "values", "animate", "animateTimeout", "names", "gap", "innerOffset", "tooltipRender", "PathProps", "LegendItemProps", "className"],
  _excluded2 = ["item", "className"];
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) { (0, _defineProperty2.default)(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; }
const useStyle = (0, _styleReact.style)(theme => ({
  root: {
    '& .onesy-Chart-wrapper': {
      aspectRatio: '1',
      maxWidth: '240px',
      height: 'unset',
      overflow: 'hidden'
    }
  },
  legend_item: {
    userSelect: 'none'
  },
  legend_icon: {
    width: '10px',
    height: '2px'
  },
  text: _objectSpread(_objectSpread({}, theme.typography.values.b3), {}, {
    textAnchor: 'middle',
    alignmentBaseline: 'middle',
    userSelect: 'none'
  }),
  append_wrapper: {
    userSelect: 'none',
    pointerEvents: 'none'
  },
  append: {
    padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
    borderRadius: theme.methods.shape.radius.value(1.5, 'px')
  },
  append_icon: {
    width: '8px',
    height: '8px',
    borderRadius: theme.methods.shape.radius.value(40, 'px')
  }
}), {
  name: 'onesy-PieChart'
});
const PieChart = props_ => {
  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
  const theme = (0, _styleReact.useOnesyTheme)();
  const l = theme.l;
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyPieChart) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
  const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
  const Surface = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
  const Chart = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Chart) || _Chart.default;
  const Path = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Path) || _Path.default;
  const {
      ref,
      tonal = true,
      color = 'primary',
      values,
      animate: animate_,
      animateTimeout: animateTimeout_,
      names,
      gap = 4,
      innerOffset = 0,
      tooltipRender: tooltipRender_,
      PathProps,
      LegendItemProps,
      className
    } = props,
    other = (0, _objectWithoutProperties2.default)(props, _excluded);
  const {
    classes
  } = useStyle();
  const refs = {
    root: _react.default.useRef(undefined),
    rects: _react.default.useRef(undefined),
    pathStyle: _react.default.useRef(undefined),
    animate: _react.default.useRef(undefined),
    animateTimeout: _react.default.useRef(undefined),
    init: _react.default.useRef(undefined),
    theme: _react.default.useRef(undefined)
  };
  const keys = _react.default.useMemo(() => {
    const result = [];
    const items = [animate_, animateTimeout_];
    items.forEach(item => {
      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
    });
    return (0, _utils.unique)(result);
  }, [animate_, animateTimeout_]);
  const breakpoints = {};
  keys.forEach(key_1 => {
    breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
      element: refs.root.current
    });
  });
  const animate = (0, _utils2.valueBreakpoints)(animate_, true, breakpoints, theme);
  const animateTimeout = (0, _utils2.valueBreakpoints)(animateTimeout_, 140, breakpoints, theme);
  const [value, setValue] = _react.default.useState();
  const [init, setInit] = _react.default.useState();
  refs.theme.current = theme;
  refs.animate.current = animate;
  refs.animateTimeout.current = animateTimeout;
  refs.init.current = init;
  const LegendItem = props__ => {
    const {
        item: item_0 = {},
        className: className_
      } = props__,
      other_ = (0, _objectWithoutProperties2.default)(props__, _excluded2);
    const {
      color: color_,
      tone = 'main',
      name = 'No name'
    } = item_0;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread(_objectSpread({
      gap: 1,
      direction: "row",
      align: "center"
    }, LegendItemProps), {}, {
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-legend-item'], className_, LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className, classes.legend_item])
    }, other_), {}, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-legend-icon'], classes.legend_icon]),
        style: {
          background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
        version: "b3",
        children: name
      })]
    }));
  };
  const make = () => {
    // Make values into x, y, coordinates
    // normalized in rect width, height values

    // invert y so 0, 0 is at bottom left
    if (refs.rects.current && values) {
      const {
        width
      } = refs.rects.current.wrapper;

      // Legend
      const legend_ = values.map(item_1 => {
        return {
          item: item_1,
          element: /*#__PURE__*/(0, _jsxRuntime.jsx)(LegendItem, {
            item: item_1
          })
        };
      });
      const center = width / 2;
      const radius = width / 2 - gap / 2;
      const total = 360;
      const valueTotal = values.reduce((result_0, itemValue) => result_0 += itemValue.values[0], 0);
      const angles = {
        start: (0, _utils2.angleToCoordinates)(0, center, center, radius)
      };
      let anglePrevious = 0;
      let anglePreviousInner = 0;
      let value_ = [];
      let d = '';

      // Elements
      const elements_ = (0, _utils.copy)(values).map((item_2, index) => {
        const {
          color: color__0,
          tone: tone_0 = 'main'
        } = item_2;
        const partPercentage = (0, _utils.percentageFromValueWithinRange)(item_2.values[0], 0, valueTotal);
        let part = total * (partPercentage / 100);
        if (partPercentage === 100) part -= 0.0001;
        const startInner = (0, _utils2.angleToCoordinates)(anglePreviousInner, center, center, radius * innerOffset);

        // Move from inner value
        if (index === 0) value_.push('M', startInner.x, startInner.y,
        // Move to 0 deg
        'L', angles.start.x, angles.start.y);
        const angleEnd = anglePrevious + part;
        const angleEndInner = anglePreviousInner + part;
        const angleText = anglePrevious + part / 2;
        const angleTextCoordinates = (0, _utils2.angleToCoordinates)(angleText, center, center, radius - (radius - radius * innerOffset) / 2);
        angles.end = (0, _utils2.angleToCoordinates)(angleEnd, center, center, radius);
        angles.endInner = (0, _utils2.angleToCoordinates)(angleEndInner, center, center, radius * innerOffset);
        angles.move = (0, _utils2.angleToCoordinates)(angleEnd, center, center, radius);
        angles.moveInner = (0, _utils2.angleToCoordinates)(angleEnd, center, center, radius * innerOffset);

        // Arc
        let invert = 0;
        if (part > 180) invert = 1;
        value_.push('A', radius, radius, 0, invert, 1, angles.end.x, angles.end.y);

        // To donut value or center
        if (innerOffset) {
          const endInner = (0, _utils2.angleToCoordinates)(angleEndInner, center, center, radius * innerOffset);
          value_.push('L', endInner.x, endInner.y);
          value_.push('A', radius * innerOffset, radius * innerOffset, 0, invert, 0, startInner.x, startInner.y);
        }
        value_.push('Z');

        // path
        d = value_.join(' ');
        anglePrevious = angleEnd;
        anglePreviousInner = angleEndInner;

        // Move for the next value
        if (index < values.length - 1) {
          value_ = ['M', angles.moveInner.x, angles.moveInner.y, 'L', angles.move.x, angles.move.y];
        }
        return {
          item: item_2,
          element: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Path, _objectSpread(_objectSpread({
              d: d,
              fill: !refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0],
              stroke: gap > 0 ? refs.theme.current.palette.background.default.primary : 'none',
              strokeWidth: gap
            }, PathProps), {}, {
              style: _objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
                opacity: 0,
                transform: 'scale(0)'
              }), {}, {
                transformBox: 'fill-box',
                transformOrigin: 'center'
              }, refs.pathStyle.current)
            })), partPercentage >= 7 && /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
              x: angleTextCoordinates.x,
              y: angleTextCoordinates.y,
              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-text'], classes.text]),
              fill: refs.theme.current.methods.palette.color.text(!refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0], true, 'light'),
              style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
                opacity: 0
              }), refs.animate.current && refs.init.current === 'animated' && {
                opacity: 1
              }), refs.pathStyle.current),
              children: `${partPercentage.toFixed(1)}%`.replace('.0%', '%')
            })]
          })
        };
      });

      // Sort
      elements_.sort((a, b) => {
        var _a$item, _b$item;
        return (a === null || a === void 0 || (_a$item = a.item) === null || _a$item === void 0 || (_a$item = _a$item.values) === null || _a$item === void 0 ? void 0 : _a$item[0]) - (b === null || b === void 0 || (_b$item = b.item) === null || _b$item === void 0 || (_b$item = _b$item.values) === null || _b$item === void 0 ? void 0 : _b$item[0]);
      });

      // Update children value
      setValue({
        legend: legend_,
        elements: elements_
      });
    }
  };
  const initMethod = () => {
    if (animate) {
      if (!init) {
        refs.pathStyle.current = {
          transition: theme.methods.transitions.make(['transform', 'opacity'], {
            timing_function: 'decelerated'
          })
        };
        setInit(true);
        setTimeout(() => {
          refs.pathStyle.current = _objectSpread(_objectSpread({}, refs.pathStyle.current), {}, {
            opacity: 1,
            transform: 'scale(1)'
          });
          setInit('animated');
        }, refs.animateTimeout.current);
      }
    }
  };
  _react.default.useEffect(() => {
    make();
    initMethod();
  }, [values, theme, animate, init]);
  const onUpdateRects = valueNew => {
    refs.rects.current = valueNew;
    make();
  };
  const tooltipRender = (0, _utils.is)('function', tooltipRender_) ? tooltipRender_ : values_ => {
    const {
      name: name_0,
      color: color__1,
      tone: tone_1 = 'main',
      values: values__
    } = values_;
    const valueTotal_0 = values.reduce((result_1, itemValue_0) => result_1 += itemValue_0.values[0], 0);
    const valueValue = values__[0];
    const valuePercentage = (valueValue / valueTotal_0 * 100).toFixed(1).replace('.0', '');
    return {
      element: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
        tonal: tonal,
        color: color,
        elevation: 1,
        gap: 0.5,
        direction: "column",
        Component: Surface,
        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-append'], classes.append]),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
          gap: 1,
          direction: "row",
          align: "center",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-LineChart-append-icon'], classes.append_icon]),
            style: {
              background: !refs.theme.current.palette.color[color__1] ? color__1 : refs.theme.current.palette.color[color__1][tone_1]
            }
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
            version: "b3",
            children: name_0
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
          gap: 0.4,
          direction: "column",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
            gap: 1,
            direction: "row",
            align: "center",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
              version: "b3",
              style: {
                fontWeight: 600
              },
              children: (names === null || names === void 0 ? void 0 : names.value) || l('Value')
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
              version: "b3",
              children: valueValue
            })]
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
            gap: 1,
            direction: "row",
            align: "center",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
              version: "b3",
              style: {
                fontWeight: 600
              },
              children: (names === null || names === void 0 ? void 0 : names.percentage) || l('Percentage')
            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
              version: "b3",
              children: [valuePercentage, "%"]
            })]
          })]
        })]
      })
    };
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Chart, _objectSpread({
    ref: item_3 => {
      if (ref) {
        if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
      }
      refs.root.current = item_3;
    },
    tonal: tonal,
    color: color,
    values: values,
    names: names,
    elements: value === null || value === void 0 ? void 0 : value.elements,
    legend: value === null || value === void 0 ? void 0 : value.legend,
    labels: false,
    marks: false,
    borders: false,
    tooltipRender: tooltipRender,
    onUpdateRects: onUpdateRects,
    elementTooltip: true,
    noMain: true,
    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-root'], className, classes.root])
  }, other));
};
PieChart.displayName = 'onesy-PieChart';
var _default = exports.default = PieChart;