cnhis-design-vue 3.1.18-beta.8 → 3.1.19-beta.0

package/es/components/drag-layout/style/index.css

@@ -1,175 +1 @@
-.drag-layout-container {
-  width: 100%;
-  height: 100%;
-  flex: 1;
-  overflow: hidden;
-  overflow-y: auto;
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  border: 1px solid #d2d9e8;
-  text-align: left;
-}
-.drag-layout-container .min-height {
-  height: calc(100% - 60px);
-  overflow: hidden;
-  overflow-y: auto;
-}
-.drag-layout-container .min-height li {
-  list-style: none;
-}
-.drag-layout-container .border-box {
-  position: absolute;
-  top: 0;
-  left: 30%;
-  border-left: 1px solid #d2d9e8;
-  height: 100%;
-}
-.drag-layout-container .text-area {
-  width: 30%;
-  height: 100%;
-  overflow-y: auto;
-  padding: 0 !important;
-}
-.drag-layout-container .text-area .info-header {
-  display: flex;
-  height: 50px;
-  line-height: 50px;
-  padding: 0 10px;
-  margin-bottom: 10px;
-  color: #2e2e2e;
-  font-size: 18px;
-  font-weight: bold;
-  background: #e6eaef;
-}
-.drag-layout-container .text-area .text-draggable {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 0 12px 12px;
-  box-sizing: border-box;
-  align-content: flex-start;
-}
-.drag-layout-container .text-area .text-draggable li {
-  width: 49%;
-  text-align: center;
-}
-.drag-layout-container .form-area {
-  position: relative;
-  width: 70%;
-  height: 100%;
-  overflow-y: auto;
-  padding: 4px;
-  box-sizing: border-box;
-}
-.drag-layout-container .form-area::-webkit-scrollbar {
-  width: 5px;
-}
-.drag-layout-container .form-area .info-header {
-  height: 50px;
-  margin-bottom: 10px;
-  background: unset;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-.drag-layout-container .form-area .combination-col {
-  border: 1px solid #cdc5d3;
-  margin-bottom: 10px;
-}
-.dragForm-select-drop {
-  z-index: 2001;
-}
-.DragFormRightItem {
-  position: relative;
-}
-.DragFormRightItem .is-edit-class {
-  background-color: #f5f5f5 !important;
-  border-color: #d9d9d9 !important;
-}
-.DragFormRightItem .combination-item {
-  padding: 0px 8px 8px;
-}
-.DragFormRightItem .combination-item > div {
-  line-height: 35px;
-}
-.DragFormRightItem .combination-item > div:hover > .form-btn {
-  display: flex;
-}
-.DragFormRightItem .form-btn {
-  display: none;
-  align-items: center;
-  position: absolute;
-  top: -1px;
-  right: 0px;
-  height: 100%;
-  white-space: nowrap;
-}
-.DragFormRightItem .form-btn .quick-reply {
-  display: inline-block;
-  border: 1px dashed #cdc5d3;
-  font-size: 12px;
-  height: 22px;
-  line-height: 1.499;
-}
-.DragFormRightItem .form-btn:deep(.n-input),
-.DragFormRightItem .form-btn:deep(.n-select) {
-  margin-left: 5px;
-}
-.DragFormRightItem .form-btn:deep(.n-select) {
-  top: -3px;
-}
-.DragFormRightItem .right-content {
-  border: 1px dashed #cdc5d3;
-  background: #fdfdfd;
-  height: 35px;
-  line-height: 35px;
-  padding: 0 10px;
-  position: relative;
-  margin-bottom: 10px;
-  cursor: pointer;
-}
-.DragFormRightItem .right-content:hover .form-btn {
-  display: flex;
-}
-.DragFormRightItem .blue-border {
-  border: 1px solid #5585f5 !important;
-}
-.DragFormRightItem .item-opacity {
-  opacity: 0.5;
-}
-.DragFormRightItem .red {
-  color: red;
-}
-.DragFormLeftItem .left-content {
-  width: 100%;
-  margin-bottom: 16px;
-  overflow: hidden;
-  cursor: pointer;
-  color: #2e2e2e;
-}
-.DragFormLeftItem .left-content .style-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 60px;
-  padding: 0 8px;
-  box-sizing: border-box;
-  margin-bottom: 8px;
-  background: #f3f5f8;
-}
-.DragFormLeftItem .left-content .style-box-input {
-  width: 85%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer !important;
-}
-.DragFormLeftItem .left-content .style-box input[type='radio'][disabled],
-.DragFormLeftItem .left-content .style-box input[type='checkbox'][disabled],
-.DragFormLeftItem .left-content .style-box input[type='radio'].disabled,
-.DragFormLeftItem .left-content .style-box input[type='checkbox'].disabled {
-  cursor: pointer !important;
-}
+.drag-layout-container{border:1px solid #d2d9e8;display:flex;flex:1;height:100%;justify-content:flex-start;overflow:hidden;overflow-y:auto;position:relative;text-align:left;width:100%}.drag-layout-container .min-height{height:calc(100% - 60px);overflow:hidden;overflow-y:auto}.drag-layout-container .min-height li{list-style:none}.drag-layout-container .border-box{border-left:1px solid #d2d9e8;height:100%;left:30%;position:absolute;top:0}.drag-layout-container .text-area{height:100%;overflow-y:auto;padding:0!important;width:30%}.drag-layout-container .text-area .info-header{background:#e6eaef;color:#2e2e2e;display:flex;font-size:18px;font-weight:700;height:50px;line-height:50px;margin-bottom:10px;padding:0 10px}.drag-layout-container .text-area .text-draggable{align-content:flex-start;align-items:flex-start;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 12px 12px}.drag-layout-container .text-area .text-draggable li{text-align:center;width:49%}.drag-layout-container .form-area{box-sizing:border-box;height:100%;overflow-y:auto;padding:4px;position:relative;width:70%}.drag-layout-container .form-area::-webkit-scrollbar{width:5px}.drag-layout-container .form-area .info-header{align-items:center;background:unset;display:flex;height:50px;justify-content:flex-end;margin-bottom:10px}.drag-layout-container .form-area .combination-col{border:1px solid #cdc5d3;margin-bottom:10px}.dragForm-select-drop{z-index:2001}.DragFormRightItem{position:relative}.DragFormRightItem .is-edit-class{background-color:#f5f5f5!important;border-color:#d9d9d9!important}.DragFormRightItem .combination-item{padding:0 8px 8px}.DragFormRightItem .combination-item>div{line-height:35px}.DragFormRightItem .combination-item>div:hover>.form-btn{display:flex}.DragFormRightItem .form-btn{align-items:center;display:none;height:100%;position:absolute;right:0;top:-1px;white-space:nowrap}.DragFormRightItem .form-btn .quick-reply{border:1px dashed #cdc5d3;display:inline-block;font-size:12px;height:22px;line-height:1.499}.DragFormRightItem .form-btn:deep(.n-input),.DragFormRightItem .form-btn:deep(.n-select){margin-left:5px}.DragFormRightItem .form-btn:deep(.n-select){top:-3px}.DragFormRightItem .right-content{background:#fdfdfd;border:1px dashed #cdc5d3;cursor:pointer;height:35px;line-height:35px;margin-bottom:10px;padding:0 10px;position:relative}.DragFormRightItem .right-content:hover .form-btn{display:flex}.DragFormRightItem .blue-border{border:1px solid #5585f5!important}.DragFormRightItem .item-opacity{opacity:.5}.DragFormRightItem .red{color:red}.DragFormLeftItem .left-content{color:#2e2e2e;cursor:pointer;margin-bottom:16px;overflow:hidden;width:100%}.DragFormLeftItem .left-content .style-box{align-items:center;background:#f3f5f8;box-sizing:border-box;display:flex;height:60px;justify-content:center;margin-bottom:8px;padding:0 8px;width:100%}.DragFormLeftItem .left-content .style-box-input{cursor:pointer!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:85%}.DragFormLeftItem .left-content .style-box input[type=checkbox].disabled,.DragFormLeftItem .left-content .style-box input[type=checkbox][disabled],.DragFormLeftItem .left-content .style-box input[type=radio].disabled,.DragFormLeftItem .left-content .style-box input[type=radio][disabled]{cursor:pointer!important}

package/es/components/fabric-chart/index.d.ts

@@ -14,7 +14,7 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
         data: import("./src/interface").IData;
         addRenderItem?: Function | undefined;
     };
-    emits: (event: "select" | "change" | "add", ...args: any[]) => void;
+    emits: (event: "change" | "add" | "select", ...args: any[]) => void;
     select: import("vue").Ref<any>;
     canvasRef: any;
     canvas: import("vue").Ref<any>;
@@ -187,7 +187,7 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
         show: boolean;
         list: unknown[];
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change" | "add")[], "select" | "change" | "add", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "add" | "select")[], "change" | "add" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: null;
         required: true;

package/es/components/fabric-chart/src/FabricChart.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
         data: IData;
         addRenderItem?: Function | undefined;
     };
-    emits: (event: "select" | "change" | "add", ...args: any[]) => void;
+    emits: (event: "change" | "add" | "select", ...args: any[]) => void;
     select: import("vue").Ref<any>;
     canvasRef: any;
     canvas: import("vue").Ref<any>;
@@ -188,7 +188,7 @@ declare const _default: import("vue").DefineComponent<{
         show: boolean;
         list: unknown[];
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change" | "add")[], "select" | "change" | "add", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "add" | "select")[], "change" | "add" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: null;
         required: true;

package/es/components/fabric-chart/src/hooks/index.js

@@ -1,4 +1,4 @@
-export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawLine, drawPoint, drawTextGroup } from './useDraw2.js';
+export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawArrow, drawLine, drawPoint, drawText, drawTextGroup } from './useDraw2.js';
 export { useCumputedPoint } from './useCumputedPoint2.js';
 export { useTop } from './useTop2.js';
 export { useLeft } from './useLeft2.js';

package/es/components/fabric-chart/src/hooks/useCenter2.js

@@ -1,6 +1,6 @@
 import { reactive, onMounted, nextTick } from 'vue';
 import { fabric } from '../utils/index.js';
-import { drawLine, defaultStyle, drawPoint, defaultTextStyle } from './useDraw2.js';
+import { drawLine, defaultStyle, drawPoint, drawText, drawArrow } from './useDraw2.js';
 import useGrid from './useGrid2.js';
 import { useShadow } from './useShadow2.js';
 import { TEMPERATURE_MENU, PAIN_MENU } from './constant2.js';
@@ -228,8 +228,22 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     });
   }
   function drawPolyLine(item, dataIndex, scaleValue) {
-    const { pointAttr = {}, lineAttr = {}, type = "circle" } = item;
-    const { noRiseStyle = {}, verifiedStyle = {}, reduceStyle = {}, pacemaker = {} } = scaleValue;
+    const {
+      pointAttr = {},
+      lineAttr = {},
+      type: pointType = "circle",
+      upArrowShow = false,
+      limitValueShow = false
+    } = item;
+    const {
+      type,
+      noRiseStyle = {},
+      verifiedStyle = {},
+      reduceStyle = {},
+      pacemaker = {},
+      upArrowStyle = {},
+      limitValueStyle = {}
+    } = scaleValue;
     const pointList = [];
     const lineList = [];
     const otherList = [];
@@ -239,7 +253,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
       const nextV = item.list[index + 1];
       const nextPoint = getPointer(nextV, scaleValue);
       let reduceLine, reducePoint, noRiseText, arrowGroup, verifiedText;
-      if ((points == null ? void 0 : points.length) && (scaleValue.type === "temperature" || scaleValue.type === "pain")) {
+      if ((points == null ? void 0 : points.length) && (type === "temperature" || type === "pain")) {
         if (v.noRise) {
           if (typeof v.noRise === "string") {
             noRiseText = drawText([points[0], points[1] + 5], {
@@ -250,22 +264,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
             otherList.push(noRiseText);
           } else {
             const top = points[1] + yCellHeight * 2;
-            const arrowLine = drawLine([...points, points[0], top], {
-              ...lineAttr,
-              stroke: noRiseStyle.fill
-            });
-            const arrow = drawText([points[0] + 0.5, top + 3], {
-              value: "v",
-              originX: "center",
-              originY: "bottom",
-              fontSize: 16,
-              ...noRiseStyle
-            });
-            arrowGroup = new fabric.Group([arrowLine, arrow], {
-              ...defaultStyle,
-              originX: "center",
-              originY: "top"
-            });
+            arrowGroup = drawArrow([points[0], points[1], top], noRiseStyle);
             otherList.push(arrowGroup);
           }
         }
@@ -279,7 +278,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
           otherList.push(verifiedText);
         }
         if (v.physicsReduce || v.drugReduce) {
-          const reduceY = cumputedY(scaleValue.type, scaleValue.list, v.physicsReduce || v.drugReduce);
+          const reduceY = cumputedY(type, scaleValue.list, v.physicsReduce || v.drugReduce);
           reduceLine = drawLine([...points, points[0], reduceY], {
             ...lineAttr,
             ...reduceStyle.line,
@@ -295,13 +294,43 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
           reducePoint && otherList.push(reducePoint);
         }
       }
+      if ((points == null ? void 0 : points.length) && type === "pulse") {
+        let upArrow;
+        if (upArrowShow && v.value > 180) {
+          let top = points[1] - yCellHeight * 2.5;
+          let yArr = [points[1] - yCellHeight / 2, top];
+          if (top < vitalSignsOriginY.originY) {
+            top = points[1] + yCellHeight * 2.5;
+            yArr = [top, points[1] + yCellHeight / 2];
+          }
+          upArrow = drawArrow([points[0], yArr[0], yArr[1]], upArrowStyle, "up");
+          otherList.push(upArrow);
+        }
+        if (limitValueShow) {
+          const commonOptions = {
+            value: v.value,
+            originX: "center",
+            originY: "center",
+            ...limitValueStyle
+          };
+          if (v.value > Math.max(...scaleValue.list)) {
+            const top = upArrow ? points[1] + yCellHeight / 2 + upArrow.height : points[1] + yCellHeight;
+            const limitValue = drawText([points[0], top], commonOptions);
+            otherList.push(limitValue);
+          }
+          if (v.value < Math.min(...scaleValue.list)) {
+            const limitValue = drawText([points[0], points[1] - yCellHeight], commonOptions);
+            otherList.push(limitValue);
+          }
+        }
+      }
       let point;
       let line;
       if (points && nextPoint && !v.breakpoint) {
         line = drawLine([...points, ...nextPoint], {
           ...lineAttr
         });
-      } else if (points && !nextPoint && !v.breakpoint && scaleValue.type === "temperature" && dataIndex < scaleValue.dataList.length - 1 && index === item.list.length - 1) {
+      } else if (points && !nextPoint && !v.breakpoint && type === "temperature" && dataIndex < scaleValue.dataList.length - 1 && index === item.list.length - 1) {
         const nextV2 = (_b = scaleValue.dataList[dataIndex + 1].list) == null ? void 0 : _b[0];
         const nextLinePoint = getPointer(nextV2, scaleValue);
         line = nextLinePoint ? drawLine([...points, ...nextLinePoint], {
@@ -319,7 +348,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
           title: item.title,
           key: item.key || "",
           unit: scaleValue.unit,
-          type: scaleValue.type,
+          type,
           dataIndex,
           index
         },
@@ -331,12 +360,12 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
         reduceLine,
         reducePoint,
         lockMovementX: true,
-        ...pacemaker.show && scaleValue.type == "pulse" ? pacemaker.style : pointAttr,
+        ...v.pacemakerShow && type == "pulse" ? pacemaker.style : pointAttr,
         ...propItems.event
       };
-      const pointType = pacemaker.show && scaleValue.type == "pulse" ? pacemaker.value : type;
+      const currentPointType = v.pacemakerShow && type == "pulse" ? pacemaker.value : pointType;
       if (previousLine) {
-        point = drawPoint(pointType, {
+        point = drawPoint(currentPointType, {
           left: previousLine.get("x2"),
           top: previousLine.get("y2"),
           ...pointAttrNew
@@ -344,13 +373,13 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
       } else {
         if (points) {
           pointAttrNew.leftLine = null;
-          if (scaleValue.type == "temperature" && index === 0) {
+          if (type == "temperature" && index === 0) {
             const objLine = [...prevLines].find((v2) => v2.dataIndex === dataIndex - 1);
             if (objLine) {
               pointAttrNew.leftLine = objLine.line;
             }
           }
-          point = drawPoint(pointType, {
+          point = drawPoint(currentPointType, {
             left: points[0],
             top: points[1],
             ...pointAttrNew
@@ -368,7 +397,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
         pointList.push(point);
       }
     });
-    scaleValue.type === "pulse" && shadowPointCache.push(pointList);
+    type === "pulse" && shadowPointCache.push(pointList);
     Promise.all(pointList).then((res) => {
       const lineListFilter = lineList.filter((v) => v);
       let prevPoint = null;
@@ -476,15 +505,6 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     }
     drawShaDow(point);
   }
-  function drawText([x, y], style) {
-    const text = new fabric.Text(style.value, {
-      ...defaultTextStyle,
-      left: x,
-      top: y,
-      ...style
-    });
-    return text;
-  }
   function isLimit(time) {
     const [minScale] = xScaleList;
     const maxScale = xScaleList.at(-1);

package/es/components/fabric-chart/src/hooks/useDraw.d.ts

@@ -38,5 +38,7 @@ export declare const defaultTextStyle: {
     lineHeight: number;
 };
 export declare function drawLine(points: number[], style: Partial<ILineOptions>): fabric.Line;
+export declare function drawText([x, y]: [x: number, y: number], style: ITextOptions): fabric.Text;
+export declare function drawArrow([x, y1, y2]: [x: number, y1: number, y2: number], style: ITextOptions | any, type?: string): fabric.Group;
 export declare function drawTextGroup(rectStyle: Partial<fabric.IRectOptions>, fontStyle: Partial<ITextOptions>, groupStyle: Partial<fabric.IGroupOptions>): fabric.Group;
 export declare function drawPoint(type: string | undefined, style: any): fabric.Object;

package/es/components/fabric-chart/src/hooks/useDraw.js

@@ -1 +1 @@
-export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawLine, drawPoint, drawTextGroup } from './useDraw2.js';
+export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawArrow, drawLine, drawPoint, drawText, drawTextGroup } from './useDraw2.js';

package/es/components/fabric-chart/src/hooks/useDraw2.js

@@ -39,6 +39,35 @@ function drawLine(points, style) {
     ...style
   });
 }
+function drawText([x, y], style) {
+  const text = new fabric.Text(String(style.value), {
+    ...defaultTextStyle,
+    left: x,
+    top: y,
+    ...style
+  });
+  return text;
+}
+function drawArrow([x, y1, y2], style, type = "down") {
+  const arrowLine = drawLine([x, y1, x, y2], {
+    strokeWidth: 1,
+    stroke: style.fill
+  });
+  const arrow = drawText([x + 0.5, type === "up" ? y2 - 3 : y2 + 3], {
+    value: "v",
+    originX: "center",
+    originY: "bottom",
+    fontSize: 16,
+    angle: type === "up" ? 180 : 0,
+    ...style
+  });
+  const arrowGroup = new fabric.Group([arrowLine, arrow], {
+    ...defaultStyle,
+    originX: "center",
+    originY: "top"
+  });
+  return arrowGroup;
+}
 function drawTextGroup(rectStyle, fontStyle, groupStyle) {
   const rect = new fabric.Rect({
     ...defaultRectStyle,
@@ -150,4 +179,4 @@ function drawPoint(type = "circle", style) {
   }
 }
 
-export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawLine, drawPoint, drawTextGroup };
+export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawArrow, drawLine, drawPoint, drawText, drawTextGroup };

package/es/components/fabric-chart/src/hooks/useLeft2.js

@@ -136,7 +136,14 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
           const isMaxMinNumber = i === 0 || i === listLen - 1;
           if (item.showNumber && (isMaxMinNumber ? item.showMaxMinNumber : true)) {
             const y = i == 0 ? top - 5 : top;
-            y > vitalSignsOriginY.originY && list.push(drawScaleNumber(v, item, textLeft, y));
+            const scaleNumber = drawScaleNumber(v, item, textLeft, y);
+            const limitY = vitalSignsOriginY.originY + scaleNumber.height / 2;
+            if (y < limitY) {
+              scaleNumber.set({
+                top: limitY
+              });
+            }
+            list.push(scaleNumber);
           }
           if (item.showScale && i !== listLen - 1) {
             for (let j = 0; j < 5; j++) {

package/es/components/fabric-chart/style/index.css

@@ -1,43 +1 @@
-.c-fabric-chart-popup-tip,
-.c-fabric-chart-popup-menu {
-  position: absolute;
-  z-index: 1001;
-  display: flex;
-  flex-flow: column nowrap;
-  margin: 0;
-  padding: 8px 12px;
-  font-size: 12px;
-}
-.c-fabric-chart-popup-tip > li,
-.c-fabric-chart-popup-menu > li {
-  list-style: none;
-}
-.c-fabric-chart-popup-tip {
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.7);
-}
-.c-fabric-chart-popup-tip > li {
-  color: #fff;
-}
-.c-fabric-chart-popup-menu {
-  padding: 8px 5px !important;
-  z-index: 1001;
-  background: #fff;
-  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, 0.2);
-  border: 1px solid #e2e6ed;
-  border-radius: 2px;
-}
-.c-fabric-chart-popup-menu > li {
-  padding: 5px;
-  background: #fff;
-  cursor: pointer;
-}
-.c-fabric-chart-popup-menu > li:hover {
-  background: #f0f7ff;
-}
-.c-fabric-chart-popup-menu > li.no-click {
-  cursor: default;
-}
-.c-fabric-chart-popup-menu > li.no-click:hover {
-  background: #fff;
-}
+.c-fabric-chart-popup-menu,.c-fabric-chart-popup-tip{display:flex;flex-flow:column nowrap;font-size:12px;margin:0;padding:8px 12px;position:absolute;z-index:1001}.c-fabric-chart-popup-menu>li,.c-fabric-chart-popup-tip>li{list-style:none}.c-fabric-chart-popup-tip{background:rgba(0,0,0,.7);border-radius:4px}.c-fabric-chart-popup-tip>li{color:#fff}.c-fabric-chart-popup-menu{background:#fff;border:1px solid #e2e6ed;border-radius:2px;box-shadow:0 2px 12px 0 rgba(56,56,56,.2);padding:8px 5px!important;z-index:1001}.c-fabric-chart-popup-menu>li{background:#fff;cursor:pointer;padding:5px}.c-fabric-chart-popup-menu>li:hover{background:#f0f7ff}.c-fabric-chart-popup-menu>li.no-click{cursor:default}.c-fabric-chart-popup-menu>li.no-click:hover{background:#fff}