diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,50 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import PropTypes from 'prop-types';
+import { jsx } from '@emotion/core';
+import Typography from '../../typography';
+
+const Title = ({ data }) => {
+    return (
+        <g className={'DGN-Title-LineChart'}>
+            <foreignObject x={0} y={230} width="100%" height="60px">
+                <ul
+                    style={{
+                        position: 'fixed',
+                        maxHeight: '175px',
+                        justifyContent: 'center',
+                        display: 'flex',
+                    }}
+                >
+                    {data.dataset.map((d, i) => {
+                        return (
+                            <li key={i} style={{ display: 'flex', alignItems: 'center' }}>
+                                <span
+                                    style={{
+                                        backgroundColor: d.borderColor,
+                                        borderRadius: '100%',
+                                        width: '6px',
+                                        height: '6px',
+                                    }}
+                                />
+                                <Typography type={'h5'} style={{ margin: '5px 5px' }} color={d.borderColor}>
+                                    {d.label}
+                                </Typography>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </foreignObject>
+        </g>
+    );
+};
+
+Title.defaultProps = {
+    data: [],
+};
+
+Title.propTypes = {
+    data: PropTypes.object.isRequired,
+};
+
+export default Title;

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

@@ -0,0 +1,172 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import PropTypes from 'prop-types';
+import { memo, forwardRef } from 'react';
+import { jsx } from '@emotion/core';
+import Axis from './Axis';
+import Labels from './Labels';
+import Grid from './Grid';
+import Points from './Point';
+// import Title from './Title';
+import Path from './Path';
+import { randomString } from '../../../utils';
+
+const BarChart = memo(
+    forwardRef(
+        (
+            {
+                labelsVisible,
+                labelsCharacterWidth,
+                labelsCountY,
+                data,
+                viewBoxHeight,
+                labelsOffsetY,
+                viewBoxWidth,
+                labelsOffsetX,
+                labelsHeightX,
+                // unitWidth,
+                // style,
+                ...props
+            },
+            ref
+        ) => {
+            // const colors = ['#FFD600', '#FFA800', '#FF7A00', '#FF0000', '#B61414', '#8FFF00', '#629000', '#019A5A', '#00C875', '#00FFD1', '#4200FF', '#0075FF', '#0095FF', '#00C2FF', '#00E0FF', '#8F00FF', '#BD00FF', '#FA00FF', '#FF00B8', '#FF3D71'];
+
+            const dataSource = data.map((item, i) => ({ ...item, x: i }));
+
+            // console.log(dataSource);
+
+            const UNIT_WIDTH = 1;
+            const id = 'DGN-CUI-LineChart-' + randomString(6, { allowNumber: false, allowSymbol: false });
+
+            const round = n => {
+                return Math.round(n * 100) / 100;
+            };
+
+            const getMinX = () => {
+                return dataSource.length > 0 ? dataSource[0].x : 0;
+            };
+
+            const getMinY = () => {
+                return 0;
+            };
+
+            const getMaxX = () => {
+                return dataSource.length > 0 ? dataSource[dataSource.length - 1].x : 0;
+            };
+
+            const getMaxY = () => {
+                const yStep = labelsCountY > 0 ? labelsCountY : 1;
+                const maxY =
+                    dataSource.length > 0
+                        ? dataSource.reduce(
+                              (max, point) => (point.quantity > max ? point.quantity : max),
+                              dataSource[0].quantity
+                          )
+                        : 0;
+                return maxY ? Math.ceil(maxY / yStep) * yStep : yStep;
+            };
+
+            const getSvgX = x => {
+                const minX = getMinX();
+                const maxX = getMaxX();
+                const paddingLeft = getLabelsYWidth();
+                return round(((x - minX) / (maxX + 1 - minX)) * (Math.abs(viewBoxWidth) - paddingLeft));
+            };
+
+            const getSvgY = y => {
+                const paddingBottom = labelsVisible ? labelsHeightX + labelsOffsetX : 0;
+                const height = Math.abs(viewBoxHeight) - paddingBottom;
+                const maxY = getMaxY();
+                return round(height - (y / maxY) * height);
+            };
+
+            const getLabelsYWidth = () => {
+                const maxY = getMaxY();
+                return labelsVisible ? maxY.toString().length * labelsCharacterWidth + labelsOffsetY : 0;
+            };
+
+            const minX = getMinX();
+            const maxX = getMaxX();
+            const maxY = getMaxY();
+            const minY = getMinY();
+
+            const commonProps = {
+                getX: getSvgX.bind(),
+                getY: getSvgY.bind(),
+                maxX: maxX,
+                maxY: maxY,
+                minX: minX,
+                minY: minY,
+                round: round,
+                labelsWidthY: getLabelsYWidth(),
+                unitWidth: UNIT_WIDTH,
+            };
+
+            return (
+                <svg
+                    id={id}
+                    ref={ref}
+                    className={'DGN-CUI-LineChart'}
+                    viewBox={`0 0 ${Math.abs(viewBoxWidth)} ${Math.abs(viewBoxHeight)}`}
+                    style={{ display: 'block', overflow: 'visible', margin: `${getLabelsYWidth() * 2}` }}
+                >
+                    <Axis {...props} {...commonProps} />
+                    <Grid {...props} {...commonProps} />
+                    <Labels data={dataSource} {...props} {...commonProps} />
+                    <Path data={dataSource} viewBoxWidth={viewBoxWidth} {...props} {...commonProps} />
+                    <Points data={dataSource} viewBoxWidth={viewBoxWidth} {...props} {...commonProps} />
+                    {/* <Title data={dataSource} {...props} /> */}
+                </svg>
+            );
+        }
+    )
+);
+
+BarChart.defaultProps = {
+    data: [],
+    viewBoxHeight: 200,
+    viewBoxWidth: 500,
+    ...Axis.defaultProps,
+    ...Labels.defaultProps,
+    ...Points.defaultProps,
+    ...Grid.defaultProps,
+};
+
+BarChart.propTypes = {
+    data: PropTypes.array.isRequired,
+    /** drawn Ratio of viewBoxHeight entered by user, default is: 200px */
+    viewBoxHeight: PropTypes.number,
+    /** drawn Ratio of viewBoxWidth entered by user, default is: 500px */
+    viewBoxWidth: PropTypes.number,
+    /** the axisColor change color */
+    axisColor: PropTypes.string,
+    /** the axisVisible Hide or show the Axis axis */
+    axisVisible: PropTypes.bool,
+    /** change style show of label ['', 'italic'], default: 'italic' */
+    labelStyle: PropTypes.string,
+    /** change  Line grid display style ['full' , 'horizontal', 'none'], default: 'full'*/
+    GridLines: PropTypes.string,
+    /** show data information when hovering in the area containing the column */
+    pointsIsHoverOnZone: PropTypes.bool,
+    /** show or hiden point */
+    pointsVisible: PropTypes.bool,
+    /** change the inner color of the point button  */
+    pointsColor: PropTypes.string,
+    /** change the radius of the point is created */
+    pointsRadius: PropTypes.number,
+    /** the thickness of the line to be drawn */
+    STROKE: PropTypes.number,
+    /** shows the line to be drawn */
+    PathVisible: PropTypes.bool,
+    /** 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,
+    /** show or hiden the line to be drawn smooth */
+    Smooth: PropTypes.bool,
+    ...Axis.propTypes,
+    ...Labels.propTypes,
+    ...Points.propTypes,
+    ...Grid.propTypes,
+};
+
+export default BarChart;

package/src/components/chart/line-v2/index.stories.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import LineChart from './index';
+import { ImportComp } from 'components/others/import/index.stories';
+
+// export default {
+//     title: 'Components/LineChart-v2',
+//     component: LineChart,
+// };
+
+const dataSource = [
+    { name: 'Jan', quantity: 120 },
+    { name: 'Feb', quantity: 100 },
+    { name: 'Mar', quantity: 420 },
+    { name: 'Apr', quantity: 100 },
+    { name: 'May', quantity: 40 },
+    { name: 'Jun', quantity: 15 },
+    { name: 'Jul', quantity: 40 },
+    { name: 'Aug', quantity: 125 },
+    { name: 'Sep', quantity: 0 },
+    { name: 'Oct', quantity: 24 },
+    { name: 'Nov', quantity: 5 },
+    { name: 'Dec', quantity: 420 },
+];
+
+// const data = {
+//     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+//     dataset: [
+//         {
+//         label: 'Stock A',
+//         quantity: [160, 120, 230, 220, 120, 58, 125, 120, 138, 82, 110, 50],
+//         fill: false,
+//         borderColor: '#0095FF',
+//     },
+//     {
+//         label: 'Stock B',
+//         quantity: [28, 20, 30, 22, 38, 22, 38, 50, 40, 58, 60, 120],
+//         fill: false,
+//         borderColor: '#FFAA00',
+//     },
+//     {
+//         label: 'Stock C',
+//         quantity: [48, 48, 50, 60, 62, 88, 98, 75, 62, 82, 122, 195],
+//         fill: false,
+//         borderColor: '#FF3D71',
+//     },
+//     {
+//         label: 'Stock D',
+//         quantity: [160, 100, 130, 40, 127, 120, 135, 8, 0, 24, 5, 420,],
+//         fill: false,
+//         borderColor: '#00C875',
+//     }]
+// };
+
+const Template = args => (
+    <>
+        <ImportComp components={'LineChart'} />
+        <div
+            style={{
+                alignItems: 'center',
+                display: 'block',
+                position: 'absolute',
+                flexDirection: 'column',
+                fontFamily: 'sans-serif',
+                justifyContent: 'center',
+                height: '100%',
+                width: '100%',
+                maxWidth: 1100,
+            }}
+        >
+            <h1
+                style={{
+                    color: '#628bfe',
+                    margin: 0,
+                    padding: '40px 0 20px 0',
+                    textAlign: 'center',
+                }}
+            >
+                Diginet-Core-UI Line Chart
+            </h1>
+            <LineChart data={dataSource} {...args} />
+        </div>
+    </>
+);
+
+const Template1 = args => (
+    <>
+        <ImportComp components={'LineChart'} />
+        <div
+            style={{
+                alignItems: 'center',
+                display: 'block',
+                position: 'absolute',
+                flexDirection: 'column',
+                fontFamily: 'sans-serif',
+                justifyContent: 'center',
+                height: '100%',
+                width: '100%',
+                maxWidth: 1100,
+            }}
+        >
+            <h1
+                style={{
+                    color: '#628bfe',
+                    margin: 0,
+                    padding: '40px 0 20px 0',
+                    textAlign: 'center',
+                }}
+            >
+                Diginet-Core-UI Line Chart
+            </h1>
+            <LineChart data={dataSource} {...args} />
+        </div>
+    </>
+);
+
+export const DefaultSimple = Template.bind({});
+DefaultSimple.args = {
+    data: dataSource,
+    axisColor: '#7F828E',
+    axisVisible: true,
+    labelStyle: 'italic',
+    GridLines: 'full',
+    pointsIsHoverOnZone: false,
+    pointsVisible: true,
+    pointsColor: '#0095FF',
+    PathVisible: true,
+    pathColor: '#0095FF',
+    Smooth: false,
+    viewBoxHeight: 200,
+    viewBoxWidth: 500,
+};
+
+export const SmoothSimple = Template1.bind({});
+SmoothSimple.args = {
+    data: dataSource,
+    axisColor: '#7F828E',
+    axisVisible: true,
+    labelStyle: 'italic',
+    GridLines: 'full',
+    pointsIsHoverOnZone: false,
+    pointsVisible: true,
+    pointsColor: '#0095FF',
+    PathVisible: true,
+    pathColor: '#0095FF',
+    Smooth: true,
+    viewBoxHeight: 200,
+    viewBoxWidth: 500,
+};

package/src/components/check-text/index.js

@@ -0,0 +1,168 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Typography } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useRef } from 'react';
+import { useTheme } from 'theme';
+import { getProp } from 'utils';
+
+const color = ['semantic/info', 'semantic/success', 'semantic/warning', 'semantic/danger'];
+const colorNum = {
+    option0: 0,
+    option1: 1,
+    option2: 2,
+    option3: 3,
+};
+
+const InterviewStatus = memo(
+    forwardRef(({ disabled, readOnly, chosen, onClick, onChoose, option }, ref) => {
+        if (!ref) {
+            ref = useRef(null);
+        }
+        const { colors } = useTheme();
+
+        const checkText = css`
+            display: inline-flex;
+            color: ${disabled ? getProp(colors, 'system/disabled') : getProp(colors, 'system/rest')};
+            div:nth-of-type(1):hover {
+                color: ${getProp(colors, color[0])};
+            }
+            div:nth-of-type(2):hover {
+                color: ${getProp(colors, color[1])};
+            }
+            div:nth-of-type(3):hover {
+                color: ${getProp(colors, color[2])};
+            }
+        `;
+        const checkTextItemText = css`
+            margin-left: 10px;
+        `;
+        const checkTextDivider = css`
+            margin: 2px 19px;
+            width: 2px;
+            height: 16px;
+            background: ${getProp(colors, 'system/rest')};
+            border-radius: 1px;
+        `;
+
+        const onClickItem = (e, index) => {
+            const clickedItem = ref.current.querySelectorAll('div');
+            if (readOnly || clickedItem[index].style.color) return;
+            clickedItem.forEach((el, i) => {
+                if (i === index) {
+                    el.style.color = getProp(colors, color[index]);
+                } else if (el.style.color) {
+                    el.style.color = null;
+                }
+            });
+            e.selectedItem = {
+                value: e.target.textContent,
+                index,
+            };
+            if (onClick) onClick(e);
+            if (onChoose) onChoose(e);
+        };
+
+        useEffect(() => {
+            ref.current.querySelectorAll('div').forEach((el, i) => {
+                if (i === chosen || el.textContent === chosen) {
+                    const cl = color[isNaN(chosen) ? colorNum[chosen] : chosen];
+                    el.style.color = getProp(colors, cl, cl);
+                } else if (el.style.color) {
+                    el.style.color = null;
+                }
+            });
+        }, [chosen]);
+
+        const ItemName = option.map((index, idx) => (
+            <span key={idx} css={checkTextItemText}>
+                {index}
+            </span>
+        ));
+
+        return (
+            <div css={checkText} ref={ref}>
+                <Typography
+                    type={'p2'}
+                    style={{
+                        lineHeight: '20px',
+                        color: `${disabled ? `${getProp(colors, 'system/disabled')} !important` : 'inherit'}`,
+                        cursor: `${readOnly ? 'default' : 'pointer'}`,
+                        pointerEvents: `${disabled ? 'none' : 'auto'}`,
+                        userSelect: 'none',
+                    }}
+                    mapping={'div'}
+                    onClick={e => onClickItem(e, 0)}
+                >
+                    {ItemName[0]}
+                </Typography>
+                <span css={checkTextDivider} />
+                <Typography
+                    type={'p2'}
+                    style={{
+                        lineHeight: '20px',
+                        color: `${disabled ? `${getProp(colors, 'system.disabled')} !important` : 'inherit'}`,
+                        cursor: `${readOnly ? 'default' : 'pointer'}`,
+                        pointerEvents: `${disabled ? 'none' : 'auto'}`,
+                        userSelect: 'none',
+                    }}
+                    mapping={'div'}
+                    onClick={e => onClickItem(e, 1)}
+                >
+                    {ItemName[1]}
+                </Typography>
+                <span css={checkTextDivider} />
+                <Typography
+                    type={'p2'}
+                    style={{
+                        lineHeight: '20px',
+                        color: `${disabled ? `${getProp(colors, 'system/disabled')} !important` : 'inherit'}`,
+                        cursor: `${readOnly ? 'default' : 'pointer'}`,
+                        pointerEvents: `${disabled ? 'none' : 'auto'}`,
+                        userSelect: 'none',
+                    }}
+                    mapping={'div'}
+                    onClick={e => onClickItem(e, 2)}
+                >
+                    {ItemName[2]}
+                </Typography>
+                <span css={checkTextDivider} />
+                <Typography
+                    type={'p2'}
+                    style={{
+                        lineHeight: '20px',
+                        color: `${disabled ? `${getProp(colors, 'system/disabled')} !important` : 'inherit'}`,
+                        cursor: `${readOnly ? 'default' : 'pointer'}`,
+                        pointerEvents: `${disabled ? 'none' : 'auto'}`,
+                        userSelect: 'none',
+                    }}
+                    mapping={'div'}
+                    onClick={e => onClickItem(e, 3)}
+                >
+                    {ItemName[3]}
+                </Typography>
+            </div>
+        );
+    })
+);
+
+InterviewStatus.defaultProps = {
+    disabled: false,
+    option: ['status', 'success', 'warning', 'danger'],
+};
+
+InterviewStatus.propsTypes = {
+    /** Prevent all event if true */
+    disabled: PropTypes.bool,
+    /** Item of CheckText in CheckText component */
+    option: PropTypes.oneOf(['status', 'success', 'warning', 'danger']),
+    /** the displayed chosen for each change */
+    chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** The function will run to return a value of CheckText Component */
+    onClick: PropTypes.func,
+    /** The function will run to return a value of CheckText Component */
+    onChoose: PropTypes.func,
+};
+
+export default InterviewStatus;

package/src/components/check-text/index.stories.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import InterviewConfirmationComponent from './interview-confirmation';
+import InterviewStatusComponent from './interview-status';
+import CheckTextDynamic from './index';
+import { ImportComp } from 'components/others/import/index.stories';
+
+// export default {
+//     title: 'Components/CheckText',
+//     component: CheckTextDynamic,
+// };
+
+const Template = () => (
+    <>
+        <ImportComp components={'InterviewConfirmationComponent'} />
+        <InterviewConfirmationComponent onChoose={e => console.log(e.selectedItem)} chosen={0} />
+    </>
+);
+
+const Template1 = () => (
+    <>
+        <ImportComp components={'InterviewStatusComponent'} />
+        <InterviewStatusComponent onChoose={e => console.log(e.selectedItem)} />
+    </>
+);
+
+const Template2 = () => (
+    <>
+        <ImportComp components={'CheckTextDynamic'} />
+        <CheckTextDynamic onChoose={e => console.log(e.selectedItem)} chosen={0} />
+    </>
+);
+
+export const InterviewConfirmation = Template.bind({});
+InterviewConfirmation.args = {
+    disabled: false,
+    readOnly: false,
+};
+
+export const InterviewStatus = Template1.bind({});
+InterviewStatus.args = {
+    disabled: false,
+    readOnly: false,
+    chosen: 'Started',
+};
+
+export const InterviewDynamic = Template2.bind({});
+InterviewDynamic.args = {
+    disabled: false,
+    readOnly: false,
+};