diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,190 @@
+/* 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,
+    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;
+                  display: inline-block;
+                  word-break: break-word;
+              `;
+    const TextCSS = css`
+        ${typography.paragraph3};
+        fill: ${getProp(colors, 'system/rest')};
+    `;
+
+    if (labelsVisible) {
+        let xLabels;
+        let yLabels;
+        let tile = 4;
+        let tile2 = 9;
+
+        const TiLe = () => {
+            // eslint-disable-next-line no-undef
+            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 / 1.5)}
+                          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-LineChart'}>
+                {xLabels && (
+                    <g id={'DGN-AxisX'} css={labelContainerCSS}>
+                        {xLabels}
+                    </g>
+                )}
+                {yLabels && <g id={'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;

package/src/components/chart/line-v2/Path.js

@@ -0,0 +1,154 @@
+/* eslint-disable react/prop-types */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+
+const Path = ({ data, getX, getY, Smooth, PathVisible, STROKE, STROKEHover, pathColor, unitWidth }) => {
+    const point = data.map(element => {
+        const x = getX(element.x + unitWidth / 1.5);
+        const y = getY(element.quantity);
+        return [x, y];
+    });
+
+    // const Colors = data.map(element => {
+    //     const colors = element.color;
+    //     return colors;
+    // });
+
+    const PathCSS = css`
+        stroke: ${pathColor};
+        stroke-width: ${STROKE};
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        /* &:hover {
+            cursor: pointer;
+            stroke: ${pathColor};
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: ${STROKEHover};
+        } */
+    `;
+
+    // Properties of a line
+    // I:  - pointA (array) [x,y]: coordinates
+    //     - pointB (array) [x,y]: coordinates
+    // O:  - (object) { length: l, angle: a }: properties of the line
+    const line = (pointA, pointB) => {
+        const lengthX = pointB[0] - pointA[0];
+        const lengthY = pointB[1] - pointA[1];
+        const Balance = 0.005 * Math.PI;
+        const Re = 0.38 * Math.PI;
+
+        let angle = Math.atan2(lengthY, lengthX);
+
+        if (angle < -0.32 * Math.PI) {
+            angle += Re; // make sure the returned angle is in the range of (-PI/2, 3PI/2]
+        }
+
+        if (angle > 0.16 * Math.PI) {
+            angle -= Balance;
+        }
+
+        // console.log(angle);
+
+        return {
+            length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+            angle,
+        };
+    };
+
+    // Position of a control point
+    // I:  - current (array) [x, y]: current point coordinates
+    //     - previous (array) [x, y]: previous point coordinates
+    //     - next (array) [x, y]: next point coordinates
+    //     - reverse (boolean, optional): sets the direction
+    // O:  - (array) [x,y]: a tuple of coordinates
+    const controlPoint = (current, previous, next, reverse) => {
+        // When 'current' is the first or last point of the array
+        // 'previous' or 'next' don't exist.
+        // Replace with 'current'
+        const c = current;
+        const p = previous ? previous : c;
+        const n = next ? next : c;
+        // The smoothing ratio
+        const smoothing = 0.15;
+        // Properties of the opposed-line
+        const o = line(p, n);
+        // If is end-control-point, add PI to the angle to go backward
+        const rev = reverse ? Math.PI : 0;
+        // The control point position is relative to the current point
+        const x = c[0] + Math.cos(o.angle + rev) * o.length * smoothing;
+        const y = c[1] + Math.sin(o.angle * 0.095 + rev) * o.length * smoothing;
+
+        return [x, y];
+    };
+
+    const svgPathRender = point => {
+        const d = point.reduce((acc, e, i, a) => {
+            if (i > 0) {
+                const cs = controlPoint(a[i - 1], a[i - 2], e);
+                const ce = controlPoint(e, a[i - 1], a[i + 1], true);
+                return `${acc} C ${cs[0]},${cs[1]} ${ce[0]},${ce[1]} ${e[0]},${e[1]}`;
+            } else {
+                return `${acc} M ${e[0]},${e[1]}`;
+            }
+        }, '');
+
+        return <path d={d} css={PathCSS} fill={'none'} />;
+    };
+
+    const command = point => `L ${point[0]} ${point[1]} `;
+
+    const svgPath = points => {
+        // build the d attributes by looping over the points
+        const d = points.reduce(
+            (acc, point, i, a) =>
+                i === 0
+                    ? // if first point
+                      `M ${point[0]},${point[1]}`
+                    : // else
+                      `${acc} ${command(point, i, a)}`,
+            ''
+        );
+        return <path d={d} css={PathCSS} fill={'none'} />;
+    };
+
+    return PathVisible ? (
+        <g className={'DGN-Path-LineChart'}>{Smooth ? svgPathRender(point) : svgPath(point)}</g>
+    ) : null;
+};
+
+Path.defaultProps = {
+    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,
+    /** The color of the line drawn is the default color according to the data returned from the API, otherwise it will be generated by the design. */
+    pathColor: PropTypes.string,
+    /** shows the line to be drawn */
+    PathVisible: PropTypes.bool,
+    /** show or hiden the line to be drawn smooth */
+    Smooth: PropTypes.bool,
+    /** the thickness of the line to be drawn */
+    STROKE: PropTypes.number,
+    /** the unitWidth */
+    unitWidth: PropTypes.number,
+};
+
+Path.defaultProps = {
+    unitWidth: 1,
+    PathVisible: true,
+    pathColor: '#0095FF',
+    Smooth: false,
+    STROKE: 2,
+    STROKEHover: 3,
+};
+
+export default Path;

package/src/components/chart/line-v2/Point.js

@@ -0,0 +1,336 @@
+/* eslint-disable react/prop-types */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { randomString } from '../../../utils';
+import { typography } from '../../../styles/typography';
+
+const Points = ({
+    data,
+    getX,
+    getY,
+    maxY,
+    minX,
+    minY,
+    pointsColor,
+    pointsIsHoverOnZone,
+    onEnter,
+    onRemote,
+    viewBoxWidth,
+    pointsRadius,
+    pointsStrokeHover,
+    pointsStrokeColor,
+    pointsVisible,
+    strokeWidth,
+    onClick,
+    unitWidth,
+}) => {
+    const [id] = useState(randomString(6, { allowNumber: false, allowSymbol: false }));
+
+    const PointCSS = css`
+        fill: ${pointsColor};
+        stroke: ${pointsStrokeColor};
+        stroke-width: ${strokeWidth};
+        &:hover {
+            cursor: pointer;
+            fill: #fff;
+            stroke: ${pointsColor};
+            stroke-width: ${pointsStrokeHover};
+        }
+    `;
+
+    const textChartCSS = css`
+        text-anchor: middle;
+        ${typography.paragraph3};
+    `;
+
+    // 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;
+        var x = 0;
+        var y = 0;
+        var x1 = 0;
+        var y1 = 0;
+        if (h.length == 2 || h.length == 1 || h.length == 3) {
+            Width += 35;
+            x += 23;
+            y += -8;
+            x1 += -23;
+            y1 += -8;
+        }
+        if (h.length == 4 || h.length == 5) {
+            Width += 40;
+            x += 26;
+            y += -8;
+            x1 += -26;
+            y1 += -8;
+        }
+        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 / 1.5) < 20) {
+            return (
+                <g
+                    id={`${id}` + i}
+                    className={'DGN-Tooltip-Bar'}
+                    style={{ display: 'none' }}
+                    transform={`translate(${getX(point.x + unitWidth / 1.5) + 4}, ${getY(point.quantity)})`}
+                >
+                    <path
+                        d={rightTooltipPath(Width, 20, 6, 4)}
+                        fill={pointsColor}
+                        stroke={pointsColor}
+                        style={{ filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))' }}
+                    />
+                    <text x={x} y={y} dy="1em" css={textChartCSS} fill="#fff">
+                        {point.quantity}
+                    </text>
+                </g>
+            );
+        }
+
+        if (getX(point.x + unitWidth / 1.5) > viewBoxWidth) {
+            return (
+                <g
+                    id={`${id}` + i}
+                    className={'DGN-Tooltip-Bar'}
+                    style={{ display: 'none' }}
+                    transform={`translate(${getX(point.x + unitWidth / 1.5) - 4}, ${getY(point.quantity)})`}
+                >
+                    <path
+                        d={leftTooltipPath(Width, 20, 6, 4)}
+                        fill={pointsColor}
+                        stroke={pointsColor}
+                        style={{ filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))' }}
+                    />
+                    <text x={x1} y={y1} dy="1em" css={textChartCSS} fill="#fff">
+                        {point.quantity}
+                    </text>
+                </g>
+            );
+        }
+
+        if (getY(point.quantity) > 10) {
+            return (
+                <g
+                    id={`${id}` + i}
+                    className={'DGN-Tooltip-Bar'}
+                    style={{ display: 'none' }}
+                    transform={`translate(${getX(point.x + unitWidth / 1.5)}, ${getY(point.quantity) - 4})`}
+                >
+                    <path
+                        d={topTooltipPath(Width, 20, 6, 4)}
+                        fill={pointsColor}
+                        stroke={pointsColor}
+                        style={{ filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))' }}
+                    />
+                    <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 / 1.5)}, ${getY(point.quantity) + 4})`}
+            >
+                <path
+                    d={bottomTooltipPath(Width, 20, 6, 4)}
+                    fill={pointsColor}
+                    stroke={pointsColor}
+                    style={{ filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))' }}
+                />
+                <text y="10" dy="1em" css={textChartCSS} fill="#fff">
+                    {point.quantity}
+                </text>
+            </g>
+        );
+    };
+
+    return pointsVisible ? (
+        <g className={'DGN-Point-LineChart'}>
+            {data.map((point, i) => {
+                return (
+                    <g key={i} className={'DGN-Point' + i}>
+                        <circle
+                            key={i}
+                            css={PointCSS}
+                            r={point.active ? pointsRadius * 1.2 : pointsRadius}
+                            cx={getX(point.x + unitWidth / 1.5)}
+                            cy={getY(point.quantity)}
+                            onMouseEnter={e => MouseEnterTarget(e, i)}
+                            onMouseLeave={e => MouseLeaveTarget(e, i)}
+                            onClick={handleChange}
+                        />
+                        {getPlacement(point, i)}
+                    </g>
+                );
+            })}
+            {pointsIsHoverOnZone &&
+                data.map((point, i) => {
+                    return (
+                        <g key={i} className={'DGN-Point' + i}>
+                            <rect
+                                key={i}
+                                x={getX(point.x > minX ? (data[i].x + data[i - 1].x) / 2 : minX)}
+                                y={getY(maxY)}
+                                fill={'transparent'}
+                                width={getX(1)}
+                                height={getY(minY)}
+                                onMouseEnter={e => MouseEnterTarget(e, i)}
+                                onMouseLeave={e => MouseLeaveTarget(e, i)}
+                                onClick={handleChange}
+                            />
+                            {getPlacement(point, i)}
+                        </g>
+                    );
+                })}
+        </g>
+    ) : null;
+};
+
+Points.propTypes = {
+    /** 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,
+    /** change the inner color of the point button  */
+    pointsColor: PropTypes.string,
+    /** show data information when hovering in the area containing the column */
+    pointsIsHoverOnZone: PropTypes.bool,
+    /** change the radius of the point is created */
+    pointsRadius: PropTypes.number,
+    /** change the border color of the point button  */
+    pointsStrokeColor: PropTypes.string,
+    /** show or hiden point */
+    pointsVisible: PropTypes.bool,
+    /** the unitWidth */
+    unitWidth: PropTypes.number,
+};
+
+Points.defaultProps = {
+    getX: x => x,
+    getY: quantity => quantity,
+    pointsColor: '#0095FF',
+    pointsIsHoverOnZone: false,
+    pointsVisible: false,
+    unitWidth: 1,
+    pointsRadius: 3,
+    pointsStrokeHover: 2,
+};
+
+export default Points;