eli-video-interview 1.1.5 → 1.1.7

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 eli-video-interview
+Copyright (c) 2022 北京鳄梨科技有限公司
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/esm/components/BigBallSvg/index.js

@@ -9,9 +9,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './index.module.css';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SvgRoot, SvgGRoot } from './styled';
 var BigBallSvg = function () {
-    return (_jsxs("svg", __assign({ className: styles.waves, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 24 150 28", preserveAspectRatio: "none", shapeRendering: "auto" }, { children: [_jsx("defs", { children: _jsx("path", { id: "gentle-wave", d: "M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" }) }), _jsxs("g", __assign({ className: styles.parallax }, { children: [_jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "0", fill: "rgba(59, 203, 120, 0.2)" }), _jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "3", fill: "rgba(59, 203, 120, 0.2)" }), _jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "5", fill: "rgba(59, 203, 120, 0.2)" }), _jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "7", fill: "rgba(59, 203, 120, 0.2)" })] }))] })));
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: "\n        @keyframes move-forever {\n          0% {\n            transform: translate3d(-90px, 0, 0); }\n          100% {\n            transform: translate3d(85px, 0, 0); }\n        }\n        " }), _jsxs(SvgRoot, __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 24 150 28", preserveAspectRatio: "none", shapeRendering: "auto" }, { children: [_jsx("defs", { children: _jsx("path", { id: "gentle-wave", d: "M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" }) }), _jsxs(SvgGRoot, { children: [_jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "0", fill: "rgba(59, 203, 120, 0.2)" }), _jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "3", fill: "rgba(59, 203, 120, 0.2)" }), _jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "5", fill: "rgba(59, 203, 120, 0.2)" }), _jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "7", fill: "rgba(59, 203, 120, 0.2)" })] })] }))] }));
 };
 export default BigBallSvg;

package/esm/components/BigBallSvg/styled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SvgRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").SVGProps<SVGSVGElement>, {}>;
+export declare const SvgGRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").SVGProps<SVGGElement>, {}>;

package/esm/components/BigBallSvg/styled.js

@@ -0,0 +1,28 @@
+import { styled } from 'fbm-ui';
+export var SvgRoot = styled('svg')({
+    position: 'absolute',
+    bottom: 0,
+    width: '200%',
+    height: '50%',
+});
+export var SvgGRoot = styled('g')({
+    '& use': {
+        animation: 'move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite',
+        '&:nth-child(1)': {
+            animationDelay: '-2s',
+            animationDuration: '7s',
+        },
+        '&:nth-child(2)': {
+            animationDelay: '-3s',
+            animationDuration: '10s',
+        },
+        '&:nth-child(3)': {
+            animationDelay: '-4s',
+            animationDuration: '13s',
+        },
+        '&:nth-child(4)': {
+            animationDelay: '-5s',
+            animationDuration: '20s',
+        },
+    },
+});

package/esm/components/Charts/Chart.js

@@ -1,35 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import echarts from '@avocadoui/echarts';
-import { ResizeObserver } from '@juggle/resize-observer';
-import { theme } from './const';
+import * as echarts from 'echarts';
+var charts = {};
 var Chart = function (_a) {
-    var options = _a.options;
+    var _b = _a.id, id = _b === void 0 ? '' : _b, options = _a.options;
+    var currentId = useRef('');
     var target = useRef(null);
     useEffect(function () {
-        echarts.registerTheme('eli', theme);
-        var chart = echarts.init(target.current, 'eli', { devicePixelRatio: 2 });
-        chart.setOption(options);
-        var animationFrameID;
-        var ro = new ResizeObserver(function (entries) {
-            entries.forEach(function (_a) {
-                var t = _a.target;
-                var instance = echarts.getInstanceByDom(t);
-                if (instance) {
-                    animationFrameID = window.requestAnimationFrame(function () {
-                        instance.resize();
-                    });
-                }
-            });
-        });
-        if (ro)
-            ro.observe(target.current);
+        if (id && !charts[id] && options) {
+            currentId.current = id;
+            charts[id] = echarts.init(target.current);
+            charts[id].resize();
+            charts[id].setOption(options, true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id, options]);
+    useEffect(function () {
         return function () {
-            if (animationFrameID)
-                window.cancelAnimationFrame(animationFrameID);
-            ro.disconnect();
+            if (charts[currentId.current]) {
+                charts[currentId.current].dispose();
+                charts[currentId.current] = null;
+            }
         };
-    }, [options]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return (_jsx("div", { ref: target, style: {
             width: '100%',
             height: '100%',

package/esm/components/Charts/ReportPie.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ReportPieProps } from './interface';
+declare const ReportPie: React.FC<ReportPieProps>;
+export default ReportPie;

package/esm/components/Charts/ReportPie.js

@@ -0,0 +1,135 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Chart from "./Chart";
+import { levelMapping } from './const';
+var ReportPie = function (props) {
+    var id = props.id, _a = props.source, source = _a === void 0 ? [] : _a;
+    var scores = source.map(function (_a) {
+        var score = _a.score;
+        return score;
+    });
+    var isLevel = source.map(function (_a) {
+        var level = _a.level;
+        return level;
+    }).includes(0);
+    var min = Math.min.apply(Math, scores);
+    var max = Math.max.apply(Math, scores);
+    var data = source
+        .map(function (_a) {
+        var name = _a.name, score = _a.score, params = __rest(_a, ["name", "score"]);
+        return (__assign({ name: name, value: score }, params));
+    })
+        .sort(function (a, b) {
+        return a.value - b.value;
+    });
+    var options = {
+        tooltip: {
+            trigger: 'item',
+            formatter: function (_a) {
+                var name = _a.name, value = _a.value, _b = _a.data, rank = _b.rank, total = _b.total;
+                return "".concat(name, "<br />\u5F97\u5206\uFF1A").concat(value, "\u5206").concat(total > 0 ? "<br />\u6392\u540D\uFF1A".concat(rank, "/").concat(total) : '');
+            },
+            backgroundColor: 'rgba(0, 0, 0, 0.86)',
+            textStyle: {
+                color: '#fff',
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: [45, 100],
+                center: ['50%', '50%'],
+                data: data,
+                roseType: 'radius',
+                label: {
+                    color: 'rgba(0, 0, 0, 0.86)',
+                    fontWeight: 500,
+                    formatter: function (_a) {
+                        var _b;
+                        var name = _a.name, value = _a.value, level = _a.data.level;
+                        return "".concat(name, ": {").concat(level, "|").concat(((_b = levelMapping[level]) === null || _b === void 0 ? void 0 : _b.text) || "".concat(value, "\u5206"), "}");
+                    },
+                    rich: __assign({}, levelMapping),
+                },
+                labelLine: {
+                    lineStyle: {
+                        color: 'rgba(76, 175, 80, 0.3)',
+                        cap: 'square',
+                    },
+                    length: 30,
+                    length2: 30,
+                },
+                itemStyle: {
+                    color: function (_a) {
+                        var _b;
+                        var level = _a.data.level;
+                        return (_b = levelMapping[level]) === null || _b === void 0 ? void 0 : _b.itemColor;
+                    },
+                    shadowBlur: 4,
+                    shadowColor: 'rgba(0, 0, 0, 0.16)',
+                },
+            },
+            {
+                type: 'pie',
+                radius: [45, 100],
+                center: ['50%', '50%'],
+                data: data,
+                roseType: 'radius',
+                label: {
+                    position: 'inner',
+                    color: '#fff',
+                    fontWeight: 500,
+                    formatter: "{c}",
+                    fontSize: 14,
+                },
+                itemStyle: {
+                    color: function (_a) {
+                        var _b;
+                        var level = _a.data.level;
+                        return (_b = levelMapping[level]) === null || _b === void 0 ? void 0 : _b.itemColor;
+                    },
+                    shadowBlur: 4,
+                    shadowColor: 'rgba(0, 0, 0, 0.16)',
+                },
+            },
+        ],
+    };
+    return (_jsx(Chart, { id: id, options: __assign(__assign({}, options), { visualMap: isLevel
+                ? {
+                    show: false,
+                    min: min,
+                    max: max,
+                    inRange: {
+                        color: [
+                            'rgba(0, 217, 157, 0.2)',
+                            'rgba(0, 217, 157, 0.4)',
+                            'rgba(0, 217, 157, 0.6)',
+                            'rgba(0, 217, 157, 0.8)',
+                            'rgba(0, 217, 157, 1)',
+                        ],
+                    },
+                }
+                : null }) }));
+};
+export default ReportPie;

package/esm/components/Charts/TemplatePie.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { TemplatePieProps } from './interface';
+declare const TemplatePie: React.FC<TemplatePieProps>;
+export default TemplatePie;

package/esm/components/Charts/TemplatePie.js

@@ -0,0 +1,81 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Chart from "./Chart";
+var TemplatePie = function (props) {
+    var id = props.id, _a = props.source, source = _a === void 0 ? [] : _a, _b = props.isShowTooltip, isShowTooltip = _b === void 0 ? true : _b, _c = props.isShowLabel, isShowLabel = _c === void 0 ? true : _c;
+    var weights = source.map(function (_a) {
+        var weight = _a.weight;
+        return weight;
+    });
+    var min = Math.min.apply(Math, weights);
+    var max = Math.max.apply(Math, weights);
+    var data = source
+        .map(function (_a) {
+        var name = _a.name, weight = _a.weight;
+        return ({ name: name, value: weight });
+    })
+        .sort(function (a, b) {
+        return a.value - b.value;
+    });
+    var options = {
+        tooltip: {
+            show: isShowTooltip,
+            trigger: 'item',
+            formatter: '{b}: {c}',
+            backgroundColor: 'rgba(0, 0, 0, 0.86)',
+            textStyle: {
+                color: '#fff',
+            },
+        },
+        visualMap: {
+            show: false,
+            min: min,
+            max: max,
+            inRange: {
+                color: ['rgba(0, 217, 157, 0.2)', 'rgba(0, 217, 157, 0.4)', 'rgba(0, 217, 157, 0.6)', 'rgba(0, 217, 157, 0.8)', 'rgba(0, 217, 157, 1)'],
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['40%', '80%'],
+                center: ['50%', '50%'],
+                top: isShowLabel ? 16 : 0,
+                bottom: isShowLabel ? 16 : 0,
+                data: data,
+                roseType: 'radius',
+                label: {
+                    show: isShowLabel,
+                    position: 'outside',
+                    color: 'rgba(0, 0, 0, 0.86)',
+                    formatter: '{b}: {c}分',
+                    fontSize: 14,
+                },
+                labelLine: {
+                    lineStyle: {
+                        color: 'rgba(76, 175, 80, 0.3)',
+                        cap: 'square',
+                    },
+                    length: 30,
+                    length2: 30,
+                },
+                itemStyle: {
+                    shadowBlur: 4,
+                    shadowColor: 'rgb(26, 180, 138)',
+                },
+            },
+        ],
+    };
+    return (_jsx(Chart, { id: id, options: __assign({}, options) }));
+};
+export default TemplatePie;