diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,499 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { useState, useRef, memo, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import Typography from '../../typography';
+import { randomString } from '../../../utils';
+import { typography } from '../../../styles/typography';
+
+import Circle from './Circle';
+import Sectors from './Sectors';
+import Sector from './Sector';
+
+const PieChart = memo(
+    forwardRef(
+        (
+            {
+                expandOnHover,
+                renderSelectedItem,
+                // type,
+                viewData,
+                onSectorHover,
+                expandSize,
+                data,
+                title,
+                Donut,
+                width,
+                height,
+                ...props
+            },
+            ref
+        ) => {
+            const [id1] = useState(
+                randomString(6, { allowLowercase: false, allowUppercase: false, allowSymbol: false })
+            );
+            const [id2] = useState(
+                randomString(6, { allowLowercase: false, allowUppercase: false, allowSymbol: false })
+            );
+            const [id3] = useState(
+                randomString(6, { allowLowercase: false, allowUppercase: false, allowSymbol: false })
+            );
+
+            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 ZoomIn = () => {
+                let zoom = 0;
+                zoom = (width + height) / 2;
+                return zoom;
+            };
+
+            const svgCSS = css`
+                position: relative;
+                display: block;
+                margin: 0 auto;
+                overflow: hidden;
+                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+                user-select: none;
+            `;
+
+            const Pie = Donut
+                ? css`
+                      position: relative;
+                      display: flex;
+                      margin: 0 auto;
+                      &: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: #111d5e;
+                      }
+                  `
+                : css`
+                      position: relative;
+                      display: flex;
+                      margin: 0 auto;
+                  `;
+
+            const dataCSS = css`
+                fill: rgba(0, 0, 0, 0.54);
+                ${typography.paragraph1};
+                cursor: default;
+            `;
+
+            const padding1 = ZoomIn() / 10;
+            var padding = 0;
+            if (padding1 >= 60) {
+                padding += padding1 / 2;
+            } else {
+                padding += padding1;
+            }
+            const dem = data.length;
+            const position = (ZoomIn() - padding * 2) / dem;
+            const center = ZoomIn() / 4;
+            const dataWithValue = data.filter(d => d.quantity > 0);
+            const [isExpanded, setExpanded] = useState('false');
+            const expandedIndex = useRef(null);
+            // const dataSource = data.map((item, i) => ({ ...item, x: i * position }));
+            const DataTitle = data.map((item, i) => ({ ...item, x: position + i * 10 }));
+
+            // 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 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}
+                    />
+                );
+            };
+
+            return (
+                <div ref={ref} className={`DGN-CUI-Container-PieChart`}>
+                    {dataWithValue && dataWithValue.length > 0 ? (
+                        <svg width={ZoomIn()} height={ZoomIn()} css={svgCSS} direction="ltr">
+                            <defs>
+                                <filter
+                                    id={`DGN_${id3}`}
+                                    x="-50%"
+                                    y="-50%"
+                                    width="200%"
+                                    height="200%"
+                                    transform="translate(0,0)"
+                                >
+                                    <feGaussianBlur
+                                        in="SourceGraphic"
+                                        result="gaussianBlurResult"
+                                        stdDeviation="3"
+                                    ></feGaussianBlur>
+                                    <feOffset in="gaussianBlurResult" result="offsetResult" dx="2" dy="6"></feOffset>
+                                    <feComposite
+                                        in="floodResult"
+                                        in2="offsetResult"
+                                        operator="in"
+                                        result="compositeResult"
+                                    ></feComposite>
+                                    <feComposite in="SourceGraphic" in2="compositeResult" operator="over"></feComposite>
+                                </filter>
+                                <clipPath id={`DGN_${id1}`}>
+                                    <rect x="0" y="0" width={ZoomIn()} height={ZoomIn()} transform="translate(0,0)" />
+                                </clipPath>
+                                <clipPath id={`DGN_${id2}`}>
+                                    <rect x="-141" y="-20" width="400" height="64" transform="translate(0,0)" />
+                                </clipPath>
+                            </defs>
+                            <rect
+                                x="0"
+                                y="0"
+                                width={ZoomIn()}
+                                height={ZoomIn()}
+                                transform="translate(0,0)"
+                                fill="gray"
+                                opacity="0.0001"
+                            ></rect>
+                            <g clipPath={`url(#DGN_${id2})`} transform={`translate(${ZoomIn() / 2.5}, 30)`}>
+                                <Typography type={'title3'} fill={'#111d5e'} mapping={'text'}>
+                                    {title}
+                                </Typography>
+                            </g>
+                            <g css={svgCSS} transform={`translate(${ZoomIn() / 4}, ${ZoomIn() / 6})`}>
+                                {dataWithValue.length === 1
+                                    ? renderSingleData(dataWithValue[0], center)
+                                    : renderMultipleData(center)}
+                            </g>
+                            <g css={svgCSS} transform={`translate(${ZoomIn() / 4}, ${ZoomIn() / 4})`}>
+                                {Donut ? (
+                                    <circle cx={center} cy={center} r={center / 1.5} stroke="none" fill="#fff" />
+                                ) : null}
+                            </g>
+                            {viewData ? (
+                                <g clipPath={`url(#DGN_${id1})`} transform={`translate(0,0)`}>
+                                    <g transform={`translate(${-padding}, ${ZoomIn() - 80})`}>
+                                        <g css={dataCSS}>
+                                            {DataTitle.map((d, i) => {
+                                                return (
+                                                    <g
+                                                        key={i}
+                                                        transform={`translate(${5 - i * 10},${(d.x - position) * 2} )`}
+                                                        className={'item' + i}
+                                                    >
+                                                        <g transform={`translate(${d.x - 20}, 0)`}>
+                                                            <rect width="8" height="8" rx="4" fill={d.color} />
+                                                        </g>
+                                                        <Typography
+                                                            type={'p3'}
+                                                            x={d.x}
+                                                            y="10"
+                                                            mapping={'text'}
+                                                            transform={'translate(0,0)'}
+                                                            fill={'#51A30'}
+                                                        >
+                                                            {d.name}
+                                                        </Typography>
+                                                    </g>
+                                                );
+                                            })}
+                                        </g>
+                                    </g>
+                                </g>
+                            ) : null}
+                        </svg>
+                    ) : (
+                        <svg width={ZoomIn()} height={ZoomIn()} css={svgCSS} direction="ltr">
+                            <g css={Pie} transform={`translate(${ZoomIn() / 4}, ${ZoomIn() / 4})`}>
+                                <circle cx={center} cy={center} r={center} stroke="none" fill="#AAACB4" />
+                                <Typography
+                                    x="25%"
+                                    y="25%"
+                                    fill={' #fff'}
+                                    type={'title1'}
+                                    mapping={'text'}
+                                    textAnchor="middle"
+                                    background="#fff"
+                                    dy=".3em"
+                                >
+                                    0%
+                                </Typography>
+                            </g>
+                        </svg>
+                    )}
+                </div>
+            );
+        }
+    )
+);
+
+PieChart.defaultProps = {
+    data: [],
+    type: 'h4',
+    title: '',
+    expandOnHover: true,
+    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,
+    width: 500,
+    height: 300,
+    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 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 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-v2/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-v2',
+//     component: PieChart,
+//     argTypes: {
+//         strokeColor: { control: 'color' },
+//     },
+// };
+
+const data = [
+    { name: 'Công ty TNHH Xuyên Thái Bình', quantity: 100, color: '#FF3D71' },
+    { name: 'DIGINET APRICOT', quantity: 70, color: '#FFAA00' },
+    { name: 'CÔNG TY CỔ PHẦN PHÁT TRIỂN BẤT ĐỘNG SẢN FILMORE', quantity: 30, color: '#00C875' },
+    { name: 'CÔNG TY TNHH THUẬN PHÁT HƯNG', quantity: 20, color: '#0095FF' },
+    { name: 'Công Ty TNHH phong vũ', 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: 10,
+    strokeWidth: 0,
+    expandedIndex: -1,
+    strokeLinejoin: 'round',
+    strokeColor: '#fff',
+    transitionDuration: '0.5s',
+    transitionTimingFunction: 'ease-in',
+    Donut: false,
+    title: 'Diginet-core-ui',
+};

package/src/components/chart/bar/Axis.js

@@ -0,0 +1,67 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import PropTypes from "prop-types";
+import {jsx} from '@emotion/core';
+
+const Axis = ({
+    axisColor,
+    axisVisible,
+    axisWidth,
+    getX,
+    getY,
+    maxX,
+    maxY,
+    minX,
+    minY,
+    unitWidth,
+}) => {
+    // drawn Oxygen coordinate systems for width and height are entered or by default 
+    return axisVisible ? (
+        <g className={'DGN-Axis-BarChart'} stroke={axisColor} strokeWidth={axisWidth}>
+            <line
+                x1={getX(minX)}
+                y1={getY(minY)}
+                x2={getX(maxX + unitWidth + 0.5)}
+                y2={getY(minY)}
+            />
+            <line x1={getX(minX)} y1={getY(minY)} x2={getX(minX)} y2={getY(maxY + 5)} />
+        </g>
+    ) : null;
+}
+
+Axis.defaultProps = {
+    axisColor: '#7F828E',
+    axisOpacity: 1,
+    axisVisible: true,
+    axisWidth: 0.5,
+    getX: x => x,
+    getY: quantity => quantity,
+    unitWidth: 1,
+}
+
+Axis.propTypes = {
+    /** the axisColor change color */
+    axisColor: PropTypes.string,
+    /** the axisOpacity property sets the opacity of an element*/
+    axisOpacity: PropTypes.number,
+    /** the axisVisible Hide or show the Axis axis */
+    axisVisible: PropTypes.bool,
+    /** the axisWidth change the thickness of the column */
+    axisWidth: PropTypes.number,
+    /** the getX position x on Ox*/
+    getX: PropTypes.func,
+    /** the getY position y on Oy */
+    getY: PropTypes.func,
+    /** the maxX is maximum of Ox quantity returned by data*/
+    maxX: PropTypes.number,
+    /** the maxY is maximum of Oy quantity returned by data*/
+    maxY: PropTypes.number,
+    /** the minX is minimum of OX quantity returned by data*/
+    minX: PropTypes.number,
+    //** the minY is minimum of Oy quantity returned by data*/
+    minY: PropTypes.number,
+    /** the unitWidth */
+    unitWidth: PropTypes.number,
+}
+
+export default Axis;