diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,68 @@
+/** @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,
+                quantity,
+            },
+            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 && (
+                        <title>
+                            {name}: {quantity}
+                        </title>
+                    )}
+                </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,
+    quantity: PropTypes.number,
+};
+
+export default Circle;

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

@@ -0,0 +1,134 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import {useRef, memo, forwardRef} from 'react';
+import PropTypes from "prop-types";
+import ReactDOM from 'react-dom';
+import { jsx, css} from '@emotion/core';
+
+const Sector = memo(forwardRef(({
+    fill,
+    strokeColor,
+    strokeLinejoin,
+    strokeWidth,
+    onTouchStart,
+    onTouchEnd,
+    onMouseEnter,
+    onMouseLeave,
+    expandOnHover,
+    expandedIndex,
+    renderSelectedItem,
+    className,
+    path,
+    name,
+    quantity,
+    href,
+    transitionDuration,
+    transitionTimingFunction,
+    ...props
+}, ref) => {
+    let result
+
+    if (!ref) {
+        ref = useRef(null);
+    }
+
+    const pathRef = useRef(null)
+    const SectorCSS =  expandOnHover || expandedIndex >= 0 ? css`
+        transition-property: all;
+        cursor: pointer;
+        transition-timing-function: ${transitionTimingFunction};
+        transition-duration: ${transitionDuration};
+        &: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));
+        }
+    ` : css `
+        transition-property: all;
+        cursor: pointer;
+        transition-timing-function: ${transitionTimingFunction};
+        transition-duration: ${transitionDuration};
+    `;
+
+    const Data = (data, index) => {
+        let item = null;
+        if (renderSelectedItem && typeof renderSelectedItem === 'function')
+        {
+            item = renderSelectedItem({data, index});
+            const el = document.createElement('title');
+            ReactDOM.render(item, pathRef.current.appendChild(el));
+        }
+    }
+
+    const content = (
+        <g  css={SectorCSS}>
+            <path
+                d={path}
+                fill={fill}
+                ref={pathRef}
+                stroke={strokeColor}
+                className={className}
+                strokeWidth={strokeWidth}
+                strokeLinejoin={strokeLinejoin}
+                onTouchStart={onTouchStart}
+                onTouchEnd={onTouchEnd}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+                {...props}
+            >
+                {renderSelectedItem ? Data() : name && <title>{name}: {quantity}</title> }
+            </path>
+        </g>
+    )
+
+    if (href) {
+        result = <a href={href} >{content}</a>
+    } else {
+        result = content
+    }  
+    return result
+
+}))
+
+Sector.defaultProps = {
+    strokeColor: "#fff",
+    strokeWidth: 0,
+    strokeLinejoin: "round",
+    name: null,
+    quantity: null,
+    href: null,
+    transitionDuration: "8s",
+    transitionTimingFunction: "ease-out",
+}
+
+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,
+    /** The title is add from the data */
+    name: PropTypes.string,
+    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/Sectors.js

@@ -0,0 +1,96 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import PropTypes from "prop-types";
+import Sector from "./Sector";
+import {jsx} from '@emotion/core';
+
+const Sectors = ({
+    center,
+    data,
+    onSectorHover,
+    expandSize,
+    strokeWidth,
+    strokeColor,
+    startAngle,
+    angleMargin,
+    ...props
+}) => {
+
+    const total = data.reduce((prev, current) => current.quantity + prev, 0)
+    let angleStart = startAngle
+    let angleEnd = startAngle
+    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 path = `
+                    M${center},${center}
+                    L${x1},${y1}
+                    A${radius},${radius}
+                    0 ${isLarge ? 1 : 0},1
+                    ${x2},${y2}
+                    z
+                `
+                angleEnd += angleMargin;
+
+                return (
+                    <Sector
+                        key={"sector" + i}
+                        fill={d.color}
+                        path={path}
+                        href={d.href}
+                        strokeColor={strokeColor}
+                        strokeWidth={strokeWidth}
+                        total={total}
+                        onMouseEnter={e => onSectorHover(d, i, e)}
+                        onMouseLeave={e => onSectorHover(null, null, e)}
+                        onTouchEnd={e => onSectorHover(null, null, e)}
+                        onTouchStart={e => onSectorHover(d, i, e)}
+                        {...props}
+                        {...d}
+                    />
+                )
+            })}
+        </g>
+    ) : null
+}
+
+Sectors.defaultProps = {
+    expandSize: 2,
+}
+
+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

package/src/components/chart/Pie/index.js

@@ -0,0 +1,312 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { useState, useRef, useEffect, memo, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import Typography from '../../typography';
+import { jsx, css } from '@emotion/core';
+
+import Circle from './Circle';
+import Sectors from './Sectors';
+import Sector from './Sector';
+
+const PieChart = memo(
+    forwardRef(
+        (
+            {
+                expandOnHover,
+                renderSelectedItem,
+                type,
+                viewData,
+                onSectorHover,
+                expandSize,
+                data,
+                direction,
+                Donut,
+                viewBoxSize,
+                width,
+                height,
+                ...props
+            },
+            ref
+        ) => {
+            if (!ref) {
+                ref = useRef(null);
+            }
+
+            if (data[0] && !data[0].color) {
+                var colors = [];
+                let Count = data.length;
+                while (colors.length < Count) {
+                    do {
+                        var makeColorCode = '0123456789ABCDEF';
+                        var code = '#';
+                        for (var count = 0; count < 6; count++) {
+                            code = code + makeColorCode[Math.floor(Math.random() * 16)];
+                        }
+                    } while (colors.indexOf(code) >= 0);
+                    colors.push('#' + ('000000' + code.toString(16)).slice(-6));
+                }
+
+                for (let i in data) {
+                    data[i].color = colors[i];
+                }
+            }
+
+            const compare = () => {
+                if (width > height) {
+                    return height;
+                } else if (width <= height) {
+                    return width;
+                }
+            };
+
+            const ZoomIn = () => {
+                let zoom = 0;
+                zoom = compare() / 25;
+                return zoom;
+            };
+
+            const Pie = Donut
+                ? css`
+                      position: relative;
+                      display: flex;
+                      margin: 0 auto;
+                      width: ${compare()}px;
+                      height: ${compare()}px;
+                      &:before {
+                          content: '';
+                          position: absolute;
+                          display: block;
+                          position: absolute;
+                          display: flex;
+                          top: 50%;
+                          width: 50%;
+                          height: 50%;
+                          left: 50%;
+                          transform: translate(-50%, -50%);
+                          border-radius: 50%;
+                          background-color: #fff;
+                      }
+                  `
+                : css`
+                      position: relative;
+                      display: flex;
+                      margin: 0 auto;
+                      width: ${compare()}px;
+                      height: ${compare()}px;
+                  `;
+
+            const PieMini = css`
+                border-radius: 100%;
+                width: ${ZoomIn()}px;
+                height: ${ZoomIn()}px;
+            `;
+
+            const total = data.reduce((prev, current) => current.quantity + prev, 0);
+            const center = viewBoxSize / 2;
+            const dataWithValue = data.filter(d => d.quantity > 0);
+            const offset = expandOnHover || props.expandedIndex > -1 ? expandSize + 2 : 0;
+            const [isExpanded, setExpanded] = useState('false');
+            const expandedIndex = useRef(null);
+            const handleSectorHover = (data, index, e) => {
+                if (expandOnHover) {
+                    setExpanded({ isExpanded: data ? 'true' : 'false' });
+                    expandedIndex.current =
+                        index !== null ? index : props.expandedIndex > -1 ? props.expandedIndex : null;
+                }
+
+                if (onSectorHover) {
+                    onSectorHover(data, index, e);
+                }
+            };
+
+            const renderSingleData = (d, center) => {
+                return (
+                    <Circle
+                        center={center}
+                        radius={center + (d.expanded || (expandOnHover && expandedIndex === 0) ? expandSize : 0)}
+                        color={d.color}
+                        onMouseEnter={e => handleSectorHover(d, 0, e)}
+                        onMouseLeave={e => handleSectorHover(null, null, e)}
+                        onTouchEnd={e => handleSectorHover(null, null, e)}
+                        onTouchStart={e => handleSectorHover(d, 0, e)}
+                        {...d}
+                    />
+                );
+            };
+
+            const renderMultipleData = center => {
+                return (
+                    <Sectors
+                        center={center}
+                        data={
+                            expandOnHover
+                                ? data.map((d, i) => ({
+                                      ...d,
+                                      expanded: `${
+                                          isExpanded ? i === expandedIndex.current : i === props.expandedIndex
+                                      }`,
+                                  }))
+                                : data.map((d, i) => ({
+                                      ...d,
+                                      expanded: `${i === props.expandedIndex}`,
+                                  }))
+                        }
+                        {...props}
+                        expandSize={expandSize}
+                        expandOnHover={expandOnHover}
+                        renderSelectedItem={renderSelectedItem}
+                        onSectorHover={handleSectorHover}
+                    />
+                );
+            };
+
+            useEffect(() => {
+                if (direction === 'bottom' && viewData) {
+                    document.getElementById(`DGN-CUI-Container-PieChart`).style.display = 'inherit';
+                    document.getElementById(`DGN-CUI-TableData-PieChart`).style.display = 'flex';
+                }
+                if (direction === 'left' && viewData) {
+                    document.getElementById(`DGN-CUI-Container-PieChart`).style.position = 'relative';
+                    document.getElementById(`DGN-CUI-TableData-PieChart`).style.position = 'fixed';
+                }
+            }, [direction, viewData]);
+
+            return (
+                <div
+                    id={`DGN-CUI-Container-PieChart`}
+                    style={{
+                        display: '-webkit-box',
+                    }}
+                >
+                    <div css={Pie} ref={ref}>
+                        {dataWithValue && dataWithValue.length > 0 ? (
+                            <svg
+                                viewBox={`0 0 ${viewBoxSize + offset * 2} ${viewBoxSize + offset * 2}`}
+                                style={{ top: '50%', left: '50%' }}
+                            >
+                                <g transform={`translate(${offset}, ${offset})`}>
+                                    {dataWithValue.length === 1
+                                        ? renderSingleData(dataWithValue[0], center)
+                                        : renderMultipleData(center)}
+                                </g>
+                            </svg>
+                        ) : (
+                            <svg viewBox={`0 0 ${viewBoxSize + offset * 2} ${viewBoxSize + offset * 2}`}>
+                                <circle cx={center} cy={center} r={center} stroke="none" fill="#AAACB4" />
+                                <text x="50%" y="50%" textAnchor="middle" dy=".3em">
+                                    0%
+                                </text>
+                            </svg>
+                        )}
+                    </div>
+                    {viewData ? (
+                        <ul
+                            id={`DGN-CUI-TableData-PieChart`}
+                            style={{
+                                width: '100%',
+                                listStyle: 'none',
+                                borderCollapse: 'separate',
+                            }}
+                        >
+                            {data.map((d, i) => {
+                                return (
+                                    <li key={i} style={{ display: 'flex', alignItems: 'center' }}>
+                                        <span
+                                            css={PieMini}
+                                            style={{
+                                                backgroundColor: d.color,
+                                            }}
+                                        />
+                                        <Typography type={type} style={{ margin: '5px 5px' }} color={d.color}>
+                                            {d.name}
+                                        </Typography>
+                                        <Typography type={type} style={{ margin: '5px 5px' }} color={d.color}>
+                                            {((d.quantity / total) * 100).toFixed(2)}
+                                            {'%'}
+                                        </Typography>
+                                    </li>
+                                );
+                            })}
+                        </ul>
+                    ) : null}
+                </div>
+            );
+        }
+    )
+);
+
+PieChart.defaultProps = {
+    data: [],
+    type: 'h4',
+    expandOnHover: false,
+    viewData: true,
+    name: null,
+    expandSize: Sectors.defaultProps.expandSize,
+    expandedIndex: -1,
+    onSectorHover: null,
+    strokeColor: Sector.defaultProps.strokeColor,
+    strokeLinejoin: Sector.defaultProps.strokeLinejoin,
+    strokeWidth: Sector.defaultProps.strokeWidth,
+    startAngle: 0,
+    angleMargin: 0,
+    viewBoxSize: 100,
+    width: 900,
+    height: 500,
+    direction: '',
+    Donut: false,
+    transitionDuration: Sector.defaultProps.transitionDuration,
+    transitionTimingFunction: Sector.defaultProps.transitionTimingFunction,
+};
+
+PieChart.propTypes = {
+    /** the viewData will display information about the input data */
+    viewData: PropTypes.bool,
+    /** drawn Ratio of Width entered by user, default is: 900px */
+    width: PropTypes.number,
+    /** drawn Ratio of Height entered by user, default is: 500px */
+    height: PropTypes.number,
+    /** change from PieChart to DonutChart  */
+    Donut: PropTypes.bool,
+    /** Typography of font in core, default: h4  */
+    type: PropTypes.string,
+    /** The array of elements that appear in the PieChart */
+    data: PropTypes.arrayOf(
+        PropTypes.shape({
+            color: PropTypes.string,
+            name: PropTypes.string,
+            quantity: PropTypes.number.isRequired,
+            href: PropTypes.string,
+        })
+    ).isRequired,
+    /** the animation expand On Hover */
+    expandOnHover: PropTypes.bool,
+    /** the direction custom position data */
+    direction: PropTypes.string,
+    /** the Size expand On Hover */
+    expandSize: PropTypes.number,
+    /** the specified position is hovering by default */
+    expandedIndex: PropTypes.number,
+    /** returns the data of the object to be hover */
+    onSectorHover: PropTypes.func,
+    /** the StrokeWidth change color border and Stroke */
+    strokeColor: Sector.propTypes.strokeColor,
+    /** it can be applied to any element but it has effect only on the following nine */
+    strokeLinejoin: Sector.propTypes.strokeLinejoin,
+    /** 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,
+    /** The viewBox attribute defines the position and dimension, in user space, of an SVG viewport */
+    viewBoxSize: PropTypes.number,
+    /** The transition-duration CSS property sets the length of time a transition animation should take to complete. Default 0.3s */
+    transitionDuration: Sector.propTypes.transitionDuration,
+    /** The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected*/
+    transitionTimingFunction: Sector.propTypes.transitionTimingFunction,
+    /** The title is add from the data */
+    name: Sector.propTypes.name,
+};
+
+export default PieChart;

package/src/components/chart/Pie/index.stories.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PieChart from './index';
+import { ImportComp } from 'components/others/import/index.stories';
+
+export default {
+    title: 'Components/PieChart',
+    component: PieChart,
+    argTypes: {
+        strokeColor: { control: 'color' },
+    },
+};
+
+const data = [
+    { name: 'Data 1', quantity: 100, color: '#FF3D71' },
+    { name: 'Data 2', quantity: 60, color: '#FFAA00' },
+    { name: 'Data 3', quantity: 30, color: '#00C875' },
+    { name: 'Data 4', quantity: 20, color: '#0095FF' },
+    { name: 'Data 5', quantity: 10, color: '#111D5E' },
+];
+
+const styles = {
+    chartComponentsContainer: {
+        display: 'grid',
+        gridTemplateColumns: 'max-content 500px',
+        alignItems: 'center',
+        margin: '0 auto',
+    },
+    chartWrapper: { maxWidth: 'max-content', maxHeight: 'max-content', margin: '0 auto' },
+};
+
+const Template = args => (
+    <>
+        <ImportComp components={'PieChart'} />
+        <div
+            style={{
+                alignItems: 'center',
+                display: 'block',
+                position: 'absolute',
+                flexDirection: 'column',
+                fontFamily: 'sans-serif',
+                justifyContent: 'center',
+                height: '100%',
+                width: '100%',
+            }}
+        >
+            <h1
+                style={{
+                    color: '#628bfe',
+                    fontWeight: 'lighter',
+                    margin: 0,
+                    padding: '40px 0 20px 0',
+                    textAlign: 'center',
+                }}
+            >
+                Diginet-Core-UI Pie Chart
+            </h1>
+            <div style={styles.chartWrapper}>
+                <PieChart data={data} {...args} />
+            </div>
+        </div>
+    </>
+);
+
+export const Normal = Template.bind({});
+Normal.args = {
+    data: data,
+    expandOnHover: true,
+    expandSize: 2,
+    strokeWidth: 0,
+    expandedIndex: -1,
+    strokeLinejoin: 'round',
+    strokeColor: '#fff',
+    transitionDuration: '5s',
+    transitionTimingFunction: 'ease-in',
+    startAngle: 0,
+    Donut: false,
+};