@onesy/ui-react 1.0.59 → 1.0.63

package/esm/PieChart/PieChart.js

@@ -1,364 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["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) { _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; }
-import React from 'react';
-import { is, copy, percentageFromValueWithinRange, unique } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import LineElement from '../Line';
-import TypeElement from '../Type';
-import SurfaceElement from '../Surface';
-import ChartElement from '../Chart';
-import PathElement from '../Path';
-import useMediaQuery from '../useMediaQuery';
-import { angleToCoordinates, staticClassName, valueBreakpoints } from '../utils';
-const useStyle = styleMethod(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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPieChart?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Chart = React.useMemo(() => theme?.elements?.Chart || ChartElement, [theme]);
-  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
-  const {
-      tonal = true,
-      color = 'primary',
-      values,
-      animate: animate_,
-      animateTimeout: animateTimeout_,
-      names,
-      gap = 4,
-      innerOffset = 0,
-      tooltipRender: tooltipRender_,
-      PathProps,
-      LegendItemProps,
-      className
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const {
-    classes
-  } = useStyle();
-  const refs = {
-    root: React.useRef(undefined),
-    rects: React.useRef(undefined),
-    pathStyle: React.useRef(undefined),
-    animate: React.useRef(undefined),
-    animateTimeout: React.useRef(undefined),
-    init: React.useRef(undefined),
-    theme: React.useRef(undefined)
-  };
-  const keys = React.useMemo(() => {
-    const result = [];
-    const items = [animate_, animateTimeout_];
-    items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
-    });
-    return unique(result);
-  }, [animate_, animateTimeout_]);
-  const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
-      element: refs.root.current
-    });
-  });
-  const animate = valueBreakpoints(animate_, true, breakpoints, theme);
-  const animateTimeout = valueBreakpoints(animateTimeout_, 140, breakpoints, theme);
-  const [value, setValue] = React.useState();
-  const [init, setInit] = React.useState();
-  refs.theme.current = theme;
-  refs.animate.current = animate;
-  refs.animateTimeout.current = animateTimeout;
-  refs.init.current = init;
-  const LegendItem = React.useCallback(props__ => {
-    const {
-        item = {},
-        className: className_
-      } = props__,
-      other_ = _objectWithoutProperties(props__, _excluded2);
-    const {
-      color: color_,
-      tone = 'main',
-      name = 'No name'
-    } = item;
-    return /*#__PURE__*/React.createElement(Line, _extends({
-      gap: 1,
-      direction: "row",
-      align: "center"
-    }, LegendItemProps, {
-      className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-legend-item'], className_, LegendItemProps?.className, classes.legend_item])
-    }, other_), /*#__PURE__*/React.createElement("span", {
-      className: classNames([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__*/React.createElement(Type, {
-      version: "b3"
-    }, name));
-  }, [theme]);
-  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,
-        height
-      } = refs.rects.current.wrapper;
-
-      // Legend
-      const legend_ = values.map(item => {
-        return {
-          item,
-          element: /*#__PURE__*/React.createElement(LegendItem, {
-            item: item
-          })
-        };
-      });
-      const center = width / 2;
-      const radius = width / 2 - gap / 2;
-      const total = 360;
-      const valueTotal = values.reduce((result, itemValue) => result += itemValue.values[0], 0);
-      const angles = {
-        start: angleToCoordinates(0, center, center, radius)
-      };
-      let anglePrevious = 0;
-      let anglePreviousInner = 0;
-      let value_ = [];
-      let d = '';
-
-      // Elements
-      const elements_ = copy(values).map((item, index) => {
-        const {
-          color: color_,
-          tone = 'main'
-        } = item;
-        const partPercentage = percentageFromValueWithinRange(item.values[0], 0, valueTotal);
-        let part = total * (partPercentage / 100);
-        if (partPercentage === 100) part -= 0.0001;
-        const startInner = 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 = angleToCoordinates(angleText, center, center, radius - (radius - radius * innerOffset) / 2);
-        angles.end = angleToCoordinates(angleEnd, center, center, radius);
-        angles.endInner = angleToCoordinates(angleEndInner, center, center, radius * innerOffset);
-        angles.move = angleToCoordinates(angleEnd, center, center, radius);
-        angles.moveInner = 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 = 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,
-          element: /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement(Path, _extends({
-            d: d,
-            fill: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone],
-            stroke: gap > 0 ? refs.theme.current.palette.background.default.primary : 'none',
-            strokeWidth: gap
-          }, PathProps, {
-            style: _objectSpread(_objectSpread(_objectSpread({}, 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__*/React.createElement("text", {
-            x: angleTextCoordinates.x,
-            y: angleTextCoordinates.y,
-            className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-text'], classes.text]),
-            fill: refs.theme.current.methods.palette.color.text(!refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone], true, 'light'),
-            style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
-              opacity: 0
-            }), refs.animate.current && refs.init.current === 'animated' && {
-              opacity: 1
-            }), refs.pathStyle.current)
-          }, `${partPercentage.toFixed(1)}%`.replace('.0%', '%')))
-        };
-      });
-
-      // Sort
-      elements_.sort((a, b) => a?.item?.values?.[0] - b?.item?.values?.[0]);
-
-      // Update children value
-      setValue({
-        legend: legend_,
-        elements: elements_
-      });
-    }
-  };
-  const initMethod = React.useCallback(() => {
-    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);
-      }
-    }
-  }, [init, animate]);
-  React.useEffect(() => {
-    make();
-    initMethod();
-  }, [values, theme, animate, init]);
-  const onUpdateRects = valueNew => {
-    refs.rects.current = valueNew;
-    make();
-  };
-  const tooltipRender = is('function', tooltipRender_) ? tooltipRender_ : values_ => {
-    const {
-      name,
-      color: color_,
-      tone = 'main',
-      values: values__
-    } = values_;
-    const valueTotal = values.reduce((result, itemValue) => result += itemValue.values[0], 0);
-    const valueValue = values__[0];
-    const valuePercentage = (valueValue / valueTotal * 100).toFixed(1).replace('.0', '');
-    return {
-      element: /*#__PURE__*/React.createElement(Line, {
-        tonal: tonal,
-        color: color,
-        elevation: 1,
-        gap: 0.5,
-        direction: "column",
-        Component: Surface,
-        className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-append'], classes.append])
-      }, /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: classNames([staticClassName('PieChart', theme) && ['onesy-LineChart-append-icon'], classes.append_icon]),
-        style: {
-          background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
-        }
-      }), /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, name)), /*#__PURE__*/React.createElement(Line, {
-        gap: 0.4,
-        direction: "column"
-      }, /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "b3",
-        style: {
-          fontWeight: 600
-        }
-      }, names?.value || 'Value'), /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, valueValue)), /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "b3",
-        style: {
-          fontWeight: 600
-        }
-      }, names?.percentage || 'Percentage'), /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, valuePercentage, "%"))))
-    };
-  };
-  return /*#__PURE__*/React.createElement(Chart, _extends({
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
-      }
-      refs.root.current = item;
-    },
-    tonal: tonal,
-    color: color,
-    values: values,
-    names: names,
-    elements: value?.elements,
-    legend: value?.legend,
-    labels: false,
-    marks: false,
-    borders: false,
-    tooltipRender: tooltipRender,
-    onUpdateRects: onUpdateRects,
-    elementTooltip: true,
-    noMain: true,
-    className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-root'], className, classes.root])
-  }, other));
-});
-PieChart.displayName = 'onesy-PieChart';
-export default PieChart;