diginet-core-ui 1.4.39 → 1.4.40

package/src/components/chart/bar-v2/Bar.js

@@ -0,0 +1,372 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { memo, useRef, forwardRef, useState } from 'react';
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import Labels from './Labels';
+import { randomString } from '../../../utils';
+import { typography } from '../../../styles/typography';
+
+const Bars = memo(
+    forwardRef(
+        (
+            {
+                // barsOpacity,
+                barsMargin,
+                barsColor,
+                hoverTooltip,
+                viewBoxWidth,
+                data,
+                onEnter,
+                onRemote,
+                getX,
+                getY,
+                minX,
+                minY,
+                unitWidth,
+                onClick,
+                // ...props
+            },
+            ref
+        ) => {
+            const [id] = useState(randomString(6, { allowNumber: false, allowSymbol: false }));
+
+            // Start create css in Component
+            const barChartCSS = css`
+                position: relative;
+                opacity: 0.7;
+                filter: alpha(opacity=70); /* sử dụng cho IE8 trở về trước */
+                &:hover {
+                    cursor: pointer;
+                    filter: drop-shadow(0 -2px 4px rgba(21, 26, 48, 0.25));
+                    opacity: 1;
+                    filter: alpha(opacity=100); /* sử dụng cho IE8 trở về trước */
+                }
+            `;
+
+            const textChartCSS = css`
+                text-anchor: middle;
+                ${typography.paragraph3};
+            `;
+            // End create css in Component
+
+            // Create variable to calculate
+            const round = n => {
+                return Math.round(n * 100) / 100;
+            };
+
+            const barChart = useRef(null);
+
+            const BARS_MARGIN_DEFAULT = 0.16;
+
+            const margin = barsMargin >= 0 && barsMargin < unitWidth / 2 ? barsMargin : BARS_MARGIN_DEFAULT;
+            const barsWidth = unitWidth - margin * 3;
+
+            // create drawing function tooltips in different positions
+            const topTooltipPath = (width, height, offset, radius) => {
+                const left = -width / 2;
+                const right = width / 2;
+                const top = -offset - height;
+                const bottom = -offset;
+                return `M 0,0
+            L ${-offset},${bottom} 
+            H ${left + radius}
+            Q ${left},${bottom} ${left},${bottom - radius}  
+            V ${top + radius}   
+            Q ${left},${top} ${left + radius},${top}
+            H ${right - radius}
+            Q ${right},${top} ${right},${top + radius}
+            V ${bottom - radius}
+            Q ${right},${bottom} ${right - radius},${bottom}
+            H ${offset} 
+            L 0,0 z`;
+            };
+
+            const bottomTooltipPath = (width, height, offset, radius) => {
+                const left = -width / 2;
+                const right = width / 2;
+                const bottom = offset + height;
+                const top = offset;
+                return `M 0,0 
+            L ${-offset},${top} 
+            H ${left + radius}
+            Q ${left},${top} ${left},${top + radius}  
+            V ${bottom - radius}   
+            Q ${left},${bottom} ${left + radius},${bottom}
+            H ${right - radius}
+            Q ${right},${bottom} ${right},${bottom - radius}
+            V ${top + radius}
+            Q ${right},${top} ${right - radius},${top}
+            H ${offset} 
+            L 0,0 z`;
+            };
+
+            const leftTooltipPath = (width, height, offset, radius) => {
+                const left = -offset - width;
+                const right = -offset;
+                const top = -height / 2;
+                const bottom = height / 2;
+                return `M 0,0 
+            L ${right},${-offset} 
+            V ${top + radius}
+            Q ${right},${top} ${right - radius},${top}  
+            H ${left + radius}   
+            Q ${left},${top} ${left},${top + radius}
+            V ${bottom - radius}
+            Q ${left},${bottom} ${left + radius},${bottom}
+            H ${right - radius}
+            Q ${right},${bottom} ${right},${bottom - radius}
+            V ${offset} 
+            L 0,0 z`;
+            };
+
+            const rightTooltipPath = (width, height, offset, radius) => {
+                const left = offset;
+                const right = offset + width;
+                const top = -height / 2;
+                const bottom = height / 2;
+                return `M 0,0 
+            L ${left},${-offset} 
+            V ${top + radius}
+            Q ${left},${top} ${left + radius},${top}  
+            H ${right - radius}   
+            Q ${right},${top} ${right},${top + radius}
+            V ${bottom - radius}
+            Q ${right},${bottom} ${right - radius},${bottom}
+            H ${left + radius}
+            Q ${left},${bottom} ${left},${bottom - radius}
+            V ${offset} 
+            L 0,0 z`;
+            };
+
+            // Create event management function
+            const MouseEnterTarget = (e, i) => {
+                if (onEnter) onEnter(e, i);
+                document.getElementById(`${id}` + i).style.display = 'block';
+            };
+
+            const MouseLeaveTarget = (e, i) => {
+                if (onRemote) onRemote(e, i);
+                document.getElementById(`${id}` + i).style.display = 'none';
+            };
+
+            const handleChange = event => {
+                if (onClick) onClick(event);
+            };
+
+            // Create function to display tooltip by position
+            const getPlacement = (point, i) => {
+                // convert number -> string
+                const h = `${point.quantity}`;
+                var Width = 0;
+                if (h.length == 2 || h.length == 1 || h.length == 3) {
+                    Width += 35;
+                }
+                if (h.length == 4 || h.length == 5) {
+                    Width += 40;
+                }
+                if (h.length == 6 || h.length == 7) {
+                    Width += 50;
+                }
+                if (h.length == 8 || h.length == 9) {
+                    Width += 70;
+                }
+                if (h.length == 10 || h.length == 11) {
+                    Width += 90;
+                }
+                if (getX(point.x + unitWidth / 2) < 20) {
+                    return (
+                        <g
+                            id={`${id}` + i}
+                            className={'DGN-Tooltip-Bar'}
+                            style={{ display: 'none' }}
+                            transform={`translate(${getX(point.x + unitWidth / 2)}, ${getY(point.quantity)})`}
+                        >
+                            <path
+                                d={rightTooltipPath(Width, 20, 6, 4)}
+                                fill={barsColor}
+                                stroke={barsColor}
+                                style={{ filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25))' }}
+                            />
+                            <text x="23" y="-8" dy="1em" css={textChartCSS} fill="#fff">
+                                {point.quantity}
+                            </text>
+                        </g>
+                    );
+                }
+
+                if (getX(point.x + unitWidth / 2) > viewBoxWidth) {
+                    return (
+                        <g
+                            id={`${id}` + i}
+                            className={'DGN-Tooltip-Bar'}
+                            style={{ display: 'none' }}
+                            transform={`translate(${getX(point.x + unitWidth / 2)}, ${getY(point.quantity)})`}
+                        >
+                            <path
+                                d={leftTooltipPath(Width, 20, 6, 4)}
+                                fill={barsColor}
+                                stroke={barsColor}
+                                style={{ filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25))' }}
+                            />
+                            <text x="-23" y="-8" dy="1em" css={textChartCSS} fill="#fff">
+                                {point.quantity}
+                            </text>
+                        </g>
+                    );
+                }
+
+                if (getY(point.quantity + 0.5) > 10) {
+                    return (
+                        <g
+                            id={`${id}` + i}
+                            className={'DGN-Tooltip-Bar'}
+                            style={{ display: 'none' }}
+                            transform={`translate(${getX(point.x + unitWidth / 2)}, ${getY(point.quantity)})`}
+                        >
+                            <path
+                                d={topTooltipPath(Width, 20, 6, 4)}
+                                fill={barsColor}
+                                stroke={barsColor}
+                                style={{ filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25))' }}
+                            />
+                            <text y="-23" dy="1em" css={textChartCSS} fill="#fff">
+                                {point.quantity}
+                            </text>
+                        </g>
+                    );
+                }
+
+                return (
+                    <g
+                        id={`${id}` + i}
+                        className={'DGN-Tooltip-Bar'}
+                        style={{ display: 'none' }}
+                        transform={`translate(${getX(point.x + unitWidth / 2)}, ${getY(point.quantity)})`}
+                    >
+                        <path
+                            d={bottomTooltipPath(Width, 20, 6, 4)}
+                            fill={barsColor}
+                            stroke={barsColor}
+                            style={{ filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25))' }}
+                        />
+                        <text y="10" dy="1em" css={textChartCSS} fill="#fff">
+                            {point.quantity}
+                        </text>
+                    </g>
+                );
+            };
+
+            // Create function to display data
+            const getPlacementNotHover = (point, i) => {
+                return (
+                    <g
+                        id={`${id}` + i}
+                        className={'DGN-Tooltip-Bar'}
+                        style={{ display: 'none' }}
+                        transform={`translate(${getX(point.x + unitWidth / 2)}, ${getY(point.quantity + 0.5)})`}
+                    >
+                        <text y="-18" dy="1em" css={textChartCSS} fill={barsColor}>
+                            {point.quantity}
+                        </text>
+                    </g>
+                );
+            };
+
+            return hoverTooltip ? (
+                <g className={'DGN-CUI-Bar'} ref={ref}>
+                    {data.map((point, i) => {
+                        return (
+                            <g key={i} className={'DGN-Bar' + i}>
+                                <rect
+                                    id={'Bar' + i}
+                                    className={'Bar'}
+                                    ref={barChart}
+                                    css={barChartCSS}
+                                    fill={barsColor}
+                                    x={getX(point.x + BARS_MARGIN_DEFAULT)}
+                                    y={getY(point.quantity + BARS_MARGIN_DEFAULT - 0.1)}
+                                    stroke={'none'}
+                                    width={getX(barsWidth + minX)}
+                                    height={round(getY(minY) - getY(point.quantity), 2)}
+                                    onMouseEnter={e => MouseEnterTarget(e, i)}
+                                    onMouseLeave={e => MouseLeaveTarget(e, i)}
+                                    onClick={handleChange}
+                                />
+                                {getPlacement(point, i)}
+                            </g>
+                        );
+                    })}
+                </g>
+            ) : (
+                <g className={'DGN-CUI-Bar'} ref={ref}>
+                    {data.map((point, i) => {
+                        return (
+                            <g key={i} className={'DGN-Bar' + i}>
+                                <rect
+                                    className={'Bar' + i}
+                                    css={barChartCSS}
+                                    fill={barsColor}
+                                    x={getX(point.x + BARS_MARGIN_DEFAULT)}
+                                    y={getY(point.quantity + BARS_MARGIN_DEFAULT - 0.1)}
+                                    stroke={'none'}
+                                    width={getX(barsWidth + minX)}
+                                    height={round(getY(minY) - getY(point.quantity), 2)}
+                                    onMouseEnter={e => MouseEnterTarget(e, i)}
+                                    onMouseLeave={e => MouseLeaveTarget(e, i)}
+                                    onClick={handleChange}
+                                />
+                                {getPlacementNotHover(point, i)}
+                            </g>
+                        );
+                    })}
+                </g>
+            );
+        }
+    )
+);
+
+Bars.propTypes = {
+    /** change color of Bar in BarChart */
+    barsColor: PropTypes.string,
+    barsMargin: PropTypes.number,
+    /** change the percentage of blurred colors on the column */
+    barsOpacity: PropTypes.number,
+    data: PropTypes.arrayOf(
+        PropTypes.shape({
+            x: PropTypes.number,
+            quantity: PropTypes.number,
+        })
+    ).isRequired,
+    /** the getX position x on Ox*/
+    getX: PropTypes.func,
+    /** the getY position y on Oy */
+    getY: PropTypes.func,
+    labelsHeightX: Labels.propTypes.labelsHeightX,
+    labelsOffsetX: Labels.propTypes.labelsOffsetX,
+    labelsOffsetY: Labels.propTypes.labelsOffsetY,
+    labelsWidthY: PropTypes.number,
+    /** the minX is minimum of OX quantity returned by data*/
+    minX: PropTypes.number.isRequired,
+    /** the minY is minimum of Oy quantity returned by data*/
+    minY: PropTypes.number.isRequired,
+    /** the unitWidth */
+    unitWidth: PropTypes.number,
+    /** Shows tooltip containing data on hover */
+    hoverTooltip: PropTypes.bool,
+};
+
+Bars.defaultProps = {
+    barsColor: '#0095FF',
+    barsMargin: 0.1,
+    barsOpacity: 1,
+    getX: x => x,
+    getY: value => value,
+    labelsHeightX: Labels.defaultProps.labelsHeightX,
+    labelsOffsetX: Labels.defaultProps.labelsOffsetX,
+    labelsOffsetY: Labels.defaultProps.labelsOffsetY,
+    unitWidth: 1,
+    hoverTooltip: true,
+};
+
+export default Bars;

package/src/components/chart/bar-v2/Grid.js

@@ -0,0 +1,111 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import PropTypes from "prop-types";
+import {jsx} from '@emotion/core';
+
+const Grid = ({
+    getX,
+    getY,
+    gridColor,
+    GridLines,
+    gridWidth,
+    labelsCountY,
+    maxX,
+    maxY,
+    minX,
+    minY,
+    unitWidth,
+}) => {
+
+    let gridX = []
+    let gridY = []
+
+    for (let i = minX; i <= maxX + unitWidth; i++) {
+        gridX.push(
+            <line
+                key={i}
+                x1={getX(i)}
+                y1={getY(minY)}
+                x2={getX(i)}
+                y2={getY(maxY + 5)}
+            />
+        )
+    }
+
+    const yStep = labelsCountY > 0 ? labelsCountY : unitWidth
+    for (let i = minY; i <= maxY; i += Math.floor(maxY / yStep)) {
+    gridY.push(
+        <line
+            key={i}
+            x1={getX(minX)}
+            y1={getY(i)}
+            x2={getX(maxX + unitWidth + 0.5)}
+            y2={getY(i)}
+        />
+    )
+    }
+
+    if (GridLines === 'full') {
+        return (
+        <g className={'DGN-Grid-BarChart'} stroke={gridColor} strokeWidth={gridWidth}>
+            {gridX}
+            {gridY}
+        </g>
+        )
+    } 
+    if (GridLines === 'horizontal') {
+        return (
+            <g className={'DGN-Grid-BarChart'} stroke={gridColor} strokeWidth={gridWidth}>
+                {gridY}
+            </g>
+        )
+    }
+    if (GridLines === 'none'){
+        return null;
+    }
+    else {
+        return (
+            <g className={'DGN-Grid-BarChart'} stroke={gridColor} strokeWidth={gridWidth}>
+                {gridY}
+            </g>
+        )
+    }
+}
+
+Grid.propTypes = {
+    /** the getX position x on Ox*/
+    getX: PropTypes.func,
+    /** the getY position y on Oy */
+    getY: PropTypes.func,
+    /** change color of grid Columb*/
+    gridColor: PropTypes.string,
+    /** change  Columb grid display style ['full' , 'horizontal', 'none']*/
+    GridLines: PropTypes.string,
+    /** hiden or  show grid columb*/
+    gridVisible: PropTypes.bool,
+    gridWidth: PropTypes.number,
+    labelsCountY: PropTypes.number,
+    /** 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,
+}
+
+Grid.defaultProps = {
+    getX: x => x,
+    getY: y => y,
+    gridColor: 'rgba(127, 130, 142, 0.15)',
+    GridLines: 'full',
+    gridVisible: false,
+    gridWidth: 0.5,
+    labelsCountY: 5,
+    unitWidth: 1,
+}
+
+export default Grid

package/src/components/chart/bar-v2/Labels.js

@@ -0,0 +1,193 @@
+/* eslint-disable react/prop-types */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { useTheme } from 'theme';
+import { getProp } from 'utils';
+
+const Labels = ({
+    getX,
+    getY,
+    data,
+    labelsColor: labelsColorProp,
+    labelsCountY,
+    labelsFormatX,
+    viewBoxWidth,
+    labelsFormatY,
+    labelsHeightX,
+    labelsOffsetX,
+    labelStyle,
+    labelsOffsetY,
+    labelsVisible,
+    maxY,
+    minX,
+    unitWidth,
+}) => {
+    const theme = useTheme();
+    const { colors, typography } = theme;
+
+    const labelsColor = getProp(colors, labelsColorProp, labelsColorProp);
+
+    const labelContainerCSS = css`
+        transform: translate(0, ${labelsOffsetX}px);
+    `;
+
+    const Label = css`
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    `;
+
+    const LabelCSS =
+        labelStyle === 'italic'
+            ? css`
+                  fill: ${getProp(colors, 'system/rest')};
+                  text-anchor: start;
+                  ${typography.paragraph3};
+                  text-transform: capitalize;
+                  cursor: pointer;
+                  display: inline-block;
+                  transform-box: fill-box;
+                  transform: rotateZ(45deg);
+              `
+            : css`
+                  color: ${getProp(colors, 'system/rest')};
+                  text-anchor: middle;
+                  ${typography.paragraph3};
+                  text-transform: capitalize;
+                  cursor: pointer;
+                  display: inline-block;
+                  word-break: break-word;
+              `;
+
+    const TextCSS = css`
+        ${typography.paragraph3};
+        fill: ${getProp(colors, 'system/rest')};
+        cursor: 'pointer';
+    `;
+
+    if (labelsVisible) {
+        let xLabels;
+        let yLabels;
+        let tile = 4;
+        let tile2 = 9;
+
+        const TiLe = () => {
+            if (viewBoxWidth >= 800) {
+                return tile;
+            } else {
+                return tile2;
+            }
+        };
+
+        xLabels =
+            labelStyle === 'italic'
+                ? data.map((point, x) => (
+                      <text
+                          key={x}
+                          css={LabelCSS}
+                          fill={labelsColor}
+                          x={getX(point.x + unitWidth / 2)}
+                          y={getY(0) + labelsHeightX}
+                      >
+                          {labelsFormatX(point.name)}
+                      </text>
+                  ))
+                : data.map((point, x) => (
+                      <foreignObject
+                          key={x}
+                          css={Label}
+                          x={getX(point.x + unitWidth / TiLe())}
+                          y={getY(0) + labelsHeightX}
+                          width="40"
+                          height="80"
+                      >
+                          <span css={LabelCSS}>{labelsFormatX(point.name)}</span>
+                      </foreignObject>
+                  ));
+
+        const yLabelsRange = [];
+        const yStep = labelsCountY > 0 ? labelsCountY : 1;
+
+        for (let i = 0; i <= maxY; i += Math.floor(maxY / yStep)) {
+            yLabelsRange.push(i);
+        }
+
+        yLabels = yLabelsRange.map(quantity => (
+            <text
+                key={quantity}
+                fill={labelsColor}
+                x={getX(minX)}
+                y={getY(quantity) + labelsHeightX / 3}
+                transform={`translate(-${labelsOffsetY}, 0)`}
+                textAnchor="end"
+                css={TextCSS}
+            >
+                {labelsFormatY(quantity)}
+            </text>
+        ));
+
+        return (
+            <g className={'DGN-Labels-BarChart'}>
+                {xLabels && (
+                    <g className={'DGN-AxisX'} css={labelContainerCSS}>
+                        {xLabels}
+                    </g>
+                )}
+                {yLabels && <g className={'DGN-AxisY'}>{yLabels}</g>}
+            </g>
+        );
+    } else {
+        return null;
+    }
+};
+
+Labels.defaultProps = {
+    getX: x => x,
+    getY: quantity => quantity,
+    labelsCharacterWidth: 10,
+    labelsColor: 'system/rest',
+    labelsCountY: 5,
+    labelsFormatX: label => label,
+    labelsFormatY: quantity => quantity,
+    labelsHeightX: 5,
+    labelsOffsetX: 10,
+    labelsOffsetY: 10,
+    labelsStepX: 1,
+    labelsVisible: true,
+    unitWidth: 1,
+    labelStyle: 'italic',
+};
+
+Labels.propTypes = {
+    /** the getX position x on Ox*/
+    getX: PropTypes.func,
+    /** the getY position y on Oy */
+    getY: PropTypes.func,
+    /** the labelsColor change color */
+    labelsColor: PropTypes.string,
+    /** change style show of label ['', 'italic'], default: 'italic' */
+    labelStyle: PropTypes.string,
+    labelsCountY: PropTypes.number,
+    labelsFormatX: PropTypes.func,
+    labelsFormatY: PropTypes.func,
+    labelsHeightX: PropTypes.number,
+    labelsOffsetX: PropTypes.number,
+    labelsOffsetY: PropTypes.number,
+    labelsStepX: PropTypes.number,
+    /** change show or hiden of label */
+    labelsVisible: PropTypes.bool,
+    /** 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 Labels;