diginet-core-ui 1.4.39 → 1.4.40

package/src/components/chart/Pie-v2/Circle.js

@@ -0,0 +1,62 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import PropTypes from 'prop-types';
+import { memo, forwardRef } from 'react';
+import { jsx } from '@emotion/core';
+
+const Circle = memo(
+    forwardRef(
+        (
+            {
+                center,
+                color,
+                onMouseEnter,
+                onMouseLeave,
+                onTouchEnd,
+                onTouchStart,
+                className,
+                radius,
+                strokeColor,
+                strokeWidth,
+                name,
+            },
+            ref
+        ) => {
+            return (
+                <ellipse
+                    ref={ref}
+                    cx={center}
+                    cy={center}
+                    fill={color}
+                    className={className}
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
+                    onTouchEnd={onTouchEnd}
+                    onTouchStart={onTouchStart}
+                    rx={radius}
+                    ry={radius}
+                    stroke={strokeColor}
+                    strokeWidth={strokeWidth}
+                >
+                    {name}
+                </ellipse>
+            );
+        }
+    )
+);
+
+Circle.propTypes = {
+    className: PropTypes.string,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+    onTouchEnd: PropTypes.func,
+    onTouchStart: PropTypes.func,
+    center: PropTypes.number.isRequired,
+    color: PropTypes.string.isRequired,
+    radius: PropTypes.number.isRequired,
+    strokeColor: PropTypes.string,
+    strokeWidth: PropTypes.number,
+    name: PropTypes.string,
+};
+
+export default Circle;

package/src/components/chart/Pie-v2/Sector.js

@@ -0,0 +1,128 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { useRef, memo, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+
+const Sector = memo(
+    forwardRef(
+        (
+            {
+                fill,
+                strokeColor,
+                strokeLinejoin,
+                strokeWidth,
+                onTouchStart,
+                onTouchEnd,
+                onMouseEnter,
+                onMouseLeave,
+                expandOnHover,
+                expandedIndex,
+                renderSelectedItem,
+                className,
+                path,
+                href,
+                transitionDuration,
+                transitionTimingFunction,
+                transitionProperty,
+                ...props
+            },
+            ref
+        ) => {
+            let result;
+
+            if (!ref) {
+                ref = useRef(null);
+            }
+
+            const pathRef = useRef(null);
+            const SectorCSS =
+                expandOnHover || expandedIndex >= 0
+                    ? css`
+                          transition-property: ${transitionProperty};
+                          cursor: pointer;
+                          transition-timing-function: ${transitionTimingFunction};
+                          transition-duration: ${transitionDuration};
+                          &:hover {
+                              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+                              filter: drop-shadow(0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.5));
+                          }
+                      `
+                    : css`
+                          transition-property: all;
+                          cursor: pointer;
+                          transition-timing-function: ${transitionTimingFunction};
+                          transition-duration: ${transitionDuration};
+                      `;
+
+            const content = (
+                <path
+                    d={path}
+                    fill={fill}
+                    ref={pathRef}
+                    css={SectorCSS}
+                    stroke={strokeColor}
+                    className={className}
+                    strokeWidth={strokeWidth}
+                    strokeLinejoin={strokeLinejoin}
+                    onTouchStart={onTouchStart}
+                    onTouchEnd={onTouchEnd}
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
+                    {...props}
+                >
+                    {renderSelectedItem}
+                </path>
+            );
+
+            if (href) {
+                result = <a href={href}>{content}</a>;
+            } else {
+                result = content;
+            }
+            return result;
+        }
+    )
+);
+
+Sector.defaultProps = {
+    strokeColor: '#fff',
+    strokeWidth: 0,
+    strokeLinejoin: 'round',
+    quantity: null,
+    href: null,
+    transitionDuration: '0.5s',
+    transitionTimingFunction: 'ease-in',
+    transitionProperty: 'd',
+};
+
+Sector.propTypes = {
+    /** the fill change color of pie chart  */
+    fill: PropTypes.string.isRequired,
+    /** event click mouse in pie chart */
+    onMouseEnter: PropTypes.func,
+    /** event leave mouse in pie chart */
+    onMouseLeave: PropTypes.func,
+    onTouchEnd: PropTypes.func,
+    onTouchStart: PropTypes.func,
+    /** function displays selected items by custom, example:<br/>
+     * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+     */
+    renderSelectedItem: PropTypes.func,
+    path: PropTypes.string.isRequired,
+    /** the StrokeColor change color border and Stroke */
+    strokeColor: PropTypes.string,
+    /** it can be applied to any element but it has effect only on the following nine */
+    strokeLinejoin: PropTypes.string,
+    /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
+    strokeWidth: PropTypes.number,
+    quantity: PropTypes.number,
+    href: PropTypes.string,
+    /** The transition-duration CSS property sets the length of time a transition animation should take to complete. Default 0.3s */
+    transitionDuration: PropTypes.string,
+    /** The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected*/
+    transitionTimingFunction: PropTypes.string,
+    className: PropTypes.string,
+};
+
+export default Sector;

package/src/components/chart/Pie-v2/Sectors.js

@@ -0,0 +1,353 @@
+/* eslint-disable react/prop-types */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Sector from './Sector';
+import { jsx, css } from '@emotion/core';
+import { randomString } from '../../../utils';
+import { typography } from '../../../styles/typography';
+
+const Sectors = ({
+    center,
+    data,
+    onSectorHover,
+    expandSize,
+    strokeWidth,
+    strokeColor,
+    startAngle,
+    angleMargin,
+    strokeWidthTooltip,
+    strokeLinejoin,
+    transitionTimingFunction,
+    transitionProperty,
+    transitionDuration,
+    ...props
+}) => {
+    const [id] = useState(randomString(6, { allowNumber: false, allowSymbol: false }));
+    const [id1] = useState(randomString(6, { allowNumber: false, allowSymbol: false }));
+
+    const total = data.reduce((prev, current) => current.quantity + prev, 0);
+    let angleStart = startAngle;
+    let angleEnd = startAngle;
+
+    const getPath = (d, i) => {
+        const anglePosition = (angleStart + angleEnd) / 2;
+
+        var rotateX = 0;
+        var rotateY = 0;
+        var xte = 0;
+        var yte = 0;
+
+        const measureText = (str, fontSize = 16) => {
+            const widths = [
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0.2796875,
+                0.2765625,
+                0.3546875,
+                0.5546875,
+                0.5546875,
+                0.8890625,
+                0.665625,
+                0.190625,
+                0.3328125,
+                0.3328125,
+                0.3890625,
+                0.5828125,
+                0.2765625,
+                0.3328125,
+                0.2765625,
+                0.3015625,
+                0.5546875,
+                0.5546875,
+                0.5546875,
+                0.5546875,
+                0.5546875,
+                0.5546875,
+                0.5546875,
+                0.5546875,
+                0.5546875,
+                0.5546875,
+                0.2765625,
+                0.2765625,
+                0.584375,
+                0.5828125,
+                0.584375,
+                0.5546875,
+                1.0140625,
+                0.665625,
+                0.665625,
+                0.721875,
+                0.721875,
+                0.665625,
+                0.609375,
+                0.7765625,
+                0.721875,
+                0.2765625,
+                0.5,
+                0.665625,
+                0.5546875,
+                0.8328125,
+                0.721875,
+                0.7765625,
+                0.665625,
+                0.7765625,
+                0.721875,
+                0.665625,
+                0.609375,
+                0.721875,
+                0.665625,
+                0.94375,
+                0.665625,
+                0.665625,
+                0.609375,
+                0.2765625,
+                0.3546875,
+                0.2765625,
+                0.4765625,
+                0.5546875,
+                0.3328125,
+                0.5546875,
+                0.5546875,
+                0.5,
+                0.5546875,
+                0.5546875,
+                0.2765625,
+                0.5546875,
+                0.5546875,
+                0.221875,
+                0.240625,
+                0.5,
+                0.221875,
+                0.8328125,
+                0.5546875,
+                0.5546875,
+                0.5546875,
+                0.5546875,
+                0.3328125,
+                0.5,
+                0.2765625,
+                0.5546875,
+                0.5,
+                0.721875,
+                0.5,
+                0.5,
+                0.5,
+                0.3546875,
+                0.259375,
+                0.353125,
+                0.5890625,
+            ];
+            const avg = 0.5279276315789471;
+            return (
+                str
+                    .split('')
+                    .map(c => (c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg))
+                    .reduce((cur, acc) => acc + cur) * fontSize
+            );
+        };
+
+        const xPath = center + center * Math.cos((Math.PI * anglePosition) / 180);
+        const yPath = center + center * Math.sin((Math.PI * anglePosition) / 180);
+
+        const x1Path = center + center * 1.3 * Math.cos((Math.PI * anglePosition) / 180);
+        const y1Path = center + center * 1.3 * Math.sin((Math.PI * anglePosition) / 180);
+
+        if (anglePosition > 271 || anglePosition < 89) {
+            rotateX += x1Path + measureText(((d.quantity / total) * 100).toFixed(2) + '%') + 5;
+            rotateY += y1Path;
+            xte += x1Path + 30;
+            yte += y1Path - 6;
+        } else if (90 < anglePosition || anglePosition < 270) {
+            rotateX += x1Path - measureText(((d.quantity / total) * 100).toFixed(2) + '%') - 5;
+            rotateY += y1Path - 1;
+            xte += x1Path - 30;
+            yte += y1Path - 6;
+        }
+
+        const path1 = `
+            M${xPath},${yPath}
+            L${x1Path},${y1Path}
+            L${rotateX},${rotateY}
+        `;
+
+        const textChartCSS = css`
+            text-anchor: middle;
+            ${typography.paragraph1};
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+            animation: draw 8s ease-in-out forwards;
+            @keyframes draw {
+                to {
+                    stroke-dashoffset: 0;
+                }
+            }
+        `;
+
+        const PathCSS = css`
+            cursor: pointer;
+            transition-timing-function: ${transitionTimingFunction};
+            transition-property: ${transitionProperty};
+            transition-duration: ${transitionDuration};
+            stroke-dasharray: 200;
+            stroke-dashoffset: 200;
+            animation: dash 1s linear forwards;
+            &:hover {
+                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+                filter: drop-shadow(0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.2));
+            }
+            @keyframes dash {
+                to {
+                    stroke-dashoffset: 0;
+                }
+            }
+        `;
+        return (
+            <g key={'Path' + i}>
+                <path
+                    d={path1}
+                    stroke={d.color}
+                    css={PathCSS}
+                    id={`${id}${i}`}
+                    style={{ display: 'none' }}
+                    strokeWidth={strokeWidthTooltip}
+                    fill={'none'}
+                    strokeLinejoin={strokeLinejoin}
+                />
+                <text id={`${id1}${i}`} x={xte} y={yte} style={{ display: 'none' }} css={textChartCSS} fill={d.color}>
+                    {((d.quantity / total) * 100).toFixed(2)}
+                    {'%'}
+                </text>
+            </g>
+        );
+    };
+
+    return total > 0 ? (
+        <g>
+            {data.map((d, i) => {
+                const isLarge = d.quantity / total > 0.5;
+                const angle = (360 * d.quantity) / total;
+                const radius = center + (d.expanded === 'true' ? expandSize : 0) - strokeWidth / 2;
+                angleStart = angleEnd;
+                angleMargin = angleMargin > angle ? angle : angleMargin;
+                angleEnd = angleStart + angle - angleMargin;
+
+                const x1 = center + radius * Math.cos((Math.PI * angleStart) / 180);
+                const y1 = center + radius * Math.sin((Math.PI * angleStart) / 180);
+                const x2 = center + radius * Math.cos((Math.PI * angleEnd) / 180);
+                const y2 = center + radius * Math.sin((Math.PI * angleEnd) / 180);
+                const x = (x1 + x2) / 3;
+                const y = (y1 + y2) / 3;
+                const path = `
+                    M${center},${center}
+                    L${x1},${y1}
+                    A${radius},${radius}
+                    0 ${isLarge ? 1 : 0},1
+                    ${x2},${y2}
+                    z
+                `;
+                angleEnd += angleMargin;
+
+                const MouseEnterTarget = (d, e, i) => {
+                    if (onSectorHover) onSectorHover(d, i, e);
+                    document.getElementById(`${id}` + i).style.display = 'block';
+                    document.getElementById(`${id1}` + i).style.display = 'block';
+                };
+
+                const MouseLeaveTarget = (e, i) => {
+                    if (onSectorHover) onSectorHover(null, null, e);
+                    document.getElementById(`${id}` + i).style.display = 'none';
+                    document.getElementById(`${id1}` + i).style.display = 'none';
+                };
+
+                return (
+                    <g key={i} id={'sector' + i}>
+                        <Sector
+                            key={'sector' + i}
+                            fill={d.color}
+                            path={path}
+                            href={d.href}
+                            strokeColor={strokeColor}
+                            strokeWidth={strokeWidth}
+                            total={total}
+                            onMouseEnter={e => MouseEnterTarget(d, e, i)}
+                            onMouseLeave={e => MouseLeaveTarget(e, i)}
+                            onTouchEnd={e => onSectorHover(null, null, e)}
+                            onTouchStart={e => onSectorHover(d, i, e)}
+                            x={x + 15}
+                            y={y + 16}
+                            {...props}
+                            {...d}
+                        />
+                        {getPath(d, i)}
+                    </g>
+                );
+            })}
+        </g>
+    ) : null;
+};
+
+Sectors.defaultProps = {
+    expandSize: 10,
+    strokeWidthTooltip: 2,
+    transitionTimingFunction: 'ease-out',
+    strokeLinejoin: 'round',
+    transitionProperty: 'd',
+};
+
+Sectors.propTypes = {
+    center: PropTypes.number.isRequired,
+    /** The array of elements that appear in the PieChart */
+    data: PropTypes.arrayOf(
+        PropTypes.shape({
+            color: PropTypes.string.isRequired,
+            name: PropTypes.string,
+            quantity: PropTypes.number.isRequired,
+        })
+    ).isRequired,
+    /** returns the data of the object to be hover */
+    onSectorHover: PropTypes.func,
+    /** the Size expand On Hover */
+    expandSize: PropTypes.number,
+    /** the StrokeWidth change color border and Stroke */
+    strokeColor: Sector.propTypes.strokeColor,
+    /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
+    strokeWidth: Sector.propTypes.strokeWidth,
+    /** The starting angle is drawn in a circle from data first */
+    startAngle: PropTypes.number,
+    /** */
+    angleMargin: PropTypes.number,
+};
+
+export default Sectors;