@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/components/OrganizationChart/RotateManager.js

@@ -0,0 +1,349 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { isParent } from '../../util/dom';
+import { pointsDirection, getAngleByPoints } from '../../util/math';
+
+export default class RotateManager {
+    currentTarget = null; 
+
+    constructor(dom, option, selected, nodeManager) {
+        this.dom = dom;
+        this.data = option.data;
+        this.selected = selected;
+        this.nodeManager = nodeManager;
+        this.angles = this.nodeManager.angles;
+        this.drag = false;
+        if(option.autoRotate){
+            this.autoRotate(option.autoRotate);
+        }else{
+            this.initWarppersEvent();
+            this.initNodesEvent(this.dom);
+        }
+    }
+
+    // 绑定转轮拖动事件
+    initWarppersEvent(){
+        this.warppers = this.dom.getElementsByClassName('ozc_warpper');
+        Array.from(this.warppers).forEach((element, index) => {
+            element.addEventListener('mousedown', (e) => {
+                let currentTargetRect = e.currentTarget.getBoundingClientRect();
+                this.drag = false;
+                this.currentTarget = {
+                    dom: e.currentTarget, // 旋转元素
+                    index: index,         // 旋转层数
+                    center: {             // 旋转中心位置
+                        x: currentTargetRect.x + currentTargetRect.width / 2,
+                        y: currentTargetRect.y + currentTargetRect.height / 2,
+                    },
+                    startRotate: this.getRotateDeg(e.currentTarget), // 初始旋转角度
+                    startTouchPosition: { // 鼠标拖动的起始位置
+                        x: e.clientX,
+                        y: e.clientY
+                    },
+                    clockwise: undefined, // true 表示顺时针方向
+                }
+            });
+            element.addEventListener('mousemove', (e) => {
+                if(this.currentTarget){
+                    this.drag = true;
+                    // 当前拖动的层级
+                    let curLevel = this.currentTarget.index;
+                    // 鼠标拖动的当前位置
+                    this.currentTarget.endTouchPosition = { 
+                        x: e.clientX,
+                        y: e.clientY
+                    };
+                    // 是否为顺时针方向
+                    let clockwise = pointsDirection(
+                        this.currentTarget.center, 
+                        this.currentTarget.startTouchPosition, 
+                        this.currentTarget.endTouchPosition
+                    );
+                    // 旋转夹角，计算结论<=180°，要结合顺逆时判断是否>180°
+                    let angle = getAngleByPoints(
+                        this.currentTarget.center, 
+                        this.currentTarget.startTouchPosition, 
+                        this.currentTarget.endTouchPosition
+                    )[1];
+                    // 顺时针夹角为正，逆时针夹角为负
+                    if(this.currentTarget.clockwise === undefined){
+                        this.currentTarget.clockwise = clockwise;
+                    } else if (this.currentTarget.clockwise !== clockwise){ 
+                        // 用户旋转超过180度后，继续旋转, 极限是转到 350
+                        if(angle > 10){  
+                            angle = 360 - angle;
+                        // 用户向另一个方向旋转了
+                        }else{
+                            this.currentTarget.clockwise = clockwise;
+                        }
+                    }
+                    let rotate = angle;
+                    rotate = angle * (this.currentTarget.clockwise ? 1 : -1); 
+                    rotate = this.currentTarget.startRotate + rotate;
+                    // 旋转时产生的临时选中下标
+                    let selected = this.getSelected(rotate).selected;
+                    // 旋转前选中的下标
+                    let prevSelected = this.selected[curLevel];
+                    this.setRotateDeg(this.currentTarget.dom, curLevel, rotate, selected, prevSelected);
+                }                
+            });
+            element.addEventListener('mouseup', (e) => {
+                if(this.drag && this.currentTarget){
+                    let curIndex = this.currentTarget.index;
+                    let endRotate = this.getRotateDeg(this.currentTarget.dom);
+                    let result = this.getSelected(endRotate, true);
+                    endRotate = result.rotate;
+                    this.selected[curIndex] = result.selected
+                    // 刷新下层数据
+                    this.nodeManager.refreshWarpper(curIndex, this.selected);
+                    this.setRotateDeg(this.currentTarget.dom, curIndex,  endRotate, this.selected[curIndex], -1);
+                }
+                this.currentTarget = null;
+            });
+        });
+        this.dom.addEventListener('mouseleave', (e)=>{
+            if(this.drag && this.currentTarget){
+                let mouseupEvent = new Event('mouseup');
+                this.currentTarget.dom.dispatchEvent(mouseupEvent);
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        })
+    }   
+
+    // 绑定卡片点击事件
+    initNodesEvent(container){
+        container.addEventListener('click', (e) => {
+            let parent = isParent(e.target, 'ozc_card');
+            if(!this.drag && parent){
+                let warpperIndex = parseInt(parent.getAttribute('data-warpper-index'));
+                let nodeIndex = parseInt(parent.getAttribute('data-node-index'));
+                let warpperDom = this.nodeManager.warppers[warpperIndex];
+                let moveIndex = this.selected[warpperIndex] - nodeIndex;
+                let rotate = this.angles[warpperIndex] * moveIndex * -1;
+                rotate = this.getRotateDeg(warpperDom) + rotate;
+                this.selected[warpperIndex] = nodeIndex;
+                this.setRotateDeg(warpperDom, warpperIndex,  rotate, nodeIndex, -1);
+                // 刷新下层数据
+                this.nodeManager.refreshWarpper(warpperIndex, this.selected);
+            }
+        });
+    }
+
+    /**
+     * 旋转 ozc_warpper
+     * dom: ozc_warpper元素
+     * domIndex： ozc_warpper下标
+     * rotate： ozc_warpper目标旋转角度
+     * selected： 当前选中的元素
+     * prevSelected： 拖拽过程前选中的元素（上一个选中元素）
+     */
+    setRotateDeg(dom, domIndex, rotate, selected, prevSelected){
+        dom.style.transform = ` translateX(-50%) translateY(-50%) rotate(${rotate}deg)`;
+        let data = this.nodeManager.getDepthData(this.data, domIndex);
+        // 逆向旋转ozc_card
+        Array.from(dom.getElementsByClassName('ozc_card')).forEach((element, index) => {
+            element.style.transform = `rotate(${-rotate}deg)`;
+            // 清空ozc_card，并重新绘制 selected 状态
+            element.innerHTML = '';
+            this.nodeManager.render && this.nodeManager.render(element, data[index], {
+                boss: false,
+                selected: selected === index ? true : false,
+                prevSelected: prevSelected === index ? true : false,
+            });
+        }); 
+    }
+
+    // 从DOM的内联样式上取出旋转角度
+    getRotateDeg(element){
+        let transform = element.style.transform;
+        let degIndex = transform.indexOf('deg)');
+        let rotateIndex = transform.indexOf('rotate(');
+        let targetRotate = parseFloat(transform.slice(rotateIndex + 'rotate('.length, degIndex));
+        return targetRotate;
+    }
+    
+    // 根据当前旋转角度计算出选中的单位, correct = true时表示需要对角度进行修正
+    getSelected(rotate, correct){
+        let curIndex = this.currentTarget.index;
+        let unitAngle = this.angles[curIndex];
+        // step1. 吸附到最近的 unitAngle 倍数上
+        if(Math.abs(rotate % unitAngle) >= unitAngle / 2){
+            if(rotate >= 0){
+                rotate = (Math.floor(rotate / unitAngle) + 1) * unitAngle;
+            }else{
+                rotate = (Math.ceil(rotate / unitAngle) - 1) * unitAngle;
+            }
+        }else{
+            if(rotate >= 0){
+                rotate = Math.floor(rotate / unitAngle) * unitAngle;
+            }else{
+                rotate = Math.ceil(rotate / unitAngle) * unitAngle;
+            }
+        }
+        // step2. 进行超限修正 
+        // 修正前旋转了多少位置
+        let dataLength = this.nodeManager.getDepthData(this.data, curIndex).length;
+        let changeIndex = (rotate - this.currentTarget.startRotate) / unitAngle;
+        let endIndex = parseInt(changeIndex.toFixed()) + this.selected[curIndex];
+        let selectedIndex = 0;
+        // 右侧超限需要回转
+        if(endIndex >= dataLength) {
+            selectedIndex = dataLength - 1; 
+            correct && (rotate = rotate - (endIndex - (dataLength - 1)) * unitAngle);
+        // 左侧超限需要回转
+        } else if (endIndex < 0){
+            selectedIndex = 0;
+            correct && (rotate = rotate + (Math.abs(endIndex)) * unitAngle);
+        // 正常范围内
+        } else {
+            selectedIndex = endIndex;
+        }
+        return {
+            rotate: rotate,
+            selected: selectedIndex
+        };
+    }
+
+    // 自动旋转
+    autoRotate(option){
+        let current = 0;
+        let speed = option.speed || 1;
+        let direction = option.direction || 'clockwise';
+        let warppers = this.dom.getElementsByClassName('ozc_warpper');
+        function rotate(){
+            if(direction === 'clockwise'){
+                current += speed;
+            }else{
+                current -= speed;
+            }
+            Array.from(warppers).forEach((element) => {
+                element.style.transform = ` translateX(-50%) translateY(-50%) rotate(${current}deg)`;
+                Array.from(element.getElementsByClassName('ozc_card')).forEach((card) => {
+                    card.style.transform = `rotate(${-current}deg)`;
+                }); 
+            });
+            window.requestAnimationFrame(rotate);
+        }
+        window.requestAnimationFrame(rotate);
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/components/charts/components/OrganizationChart/index.js

@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import BaseChart from '../BaseChart';
+import RotateManager from './RotateManager';
+import NodeManager, { INIT_RADIUS } from './NodeManager';
+import { CHART_TYPE } from '../../util/constants';
+
+export default class OrganizationChart extends BaseChart {
+
+    static name = CHART_TYPE.ORGANIZATION
+    
+    constructor() {
+        super();
+        // 图表渲染容器
+        this.dom = null;
+        // 图表配置项
+        this.option = null;
+        // 图表所需数据
+        this.data = null;
+        // 图表容器的宽高变化监听器
+        this.resizeObserver = null;
+        // 生成节点和计算位置
+        this.nodeManager = null;
+        // 当前选中的组织index
+        this.selected = null;
+    }
+
+    // 初始化图表渲染容器
+    init(dom) {
+        this.dom = dom;
+    }
+
+    // 初始化图表渲染配置
+    setSimpleOption(chartName, option) {
+        this.option = option;
+    }
+
+    // 图表渲染回调
+    render() {
+        this.setResizeObserver();
+        this.renderCallBack && this.renderCallBack(this);
+    }
+
+    // 图表渲染完成时回调
+    onRenderReady(callback) {
+        this.renderCallBack = callback;
+    }
+
+    initDom() {
+        if(!this.data) return;
+        this.container = document.createElement('div');
+        this.container.setAttribute('class', 'ozc_container');
+        if(this.option.theme && this.option.theme.indexOf('dark') !== -1){
+            this.container.classList.add('ozc_container_dark');
+        }
+        for (const styleKey in this.option.position) {
+            if(Object.hasOwnProperty.call(this.option.position,styleKey)){
+                this.container.style[styleKey] = this.option.position[styleKey];
+            }         
+        }
+        this.dom.appendChild(this.container);
+        this.nodeManager = new NodeManager(this.container, this.option, this.selected);
+        this.rotateManager = new RotateManager(this.container, this.option, this.selected, this.nodeManager);
+    }
+
+    resizeDom() {
+        this.dom.innerHTML = '';
+        let domRect = this.dom.getBoundingClientRect();
+        let minSize = Math.min(domRect.width, domRect.height); 
+        this.option.radius = this.option.radius || INIT_RADIUS;
+        let radius = this.option.radius;
+        if(radius.minRatio !== undefined){
+            radius.min = radius.minRatio * minSize;
+        }
+
+        if(radius.gapRatio !== undefined){
+            radius.gap = radius.gapRatio * minSize;
+        }
+        this.data = this.option.data || [];
+        this.selected = this.option.selected || [1, 1];
+        this.initDom(); 
+    }
+
+    // 监听容器变化
+    setResizeObserver() {
+        this.resizeObserver = new ResizeObserver(entries => {
+            this.resizeDom();
+        });
+        this.resizeObserver.observe(this.dom);
+    }
+
+    // 图表刷新，刷新配置项
+    refresh(option) {
+        
+    }
+
+    // 图表刷新，仅刷新数据
+    refreshData(data) {
+       
+    }
+
+    // 销毁图表
+    uninstall() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        this.dom.innerHTML = '';
+    }
+
+    // 刷新图表自适应宽度
+    setResize() {
+        this.resizeDom();
+    }
+}

package/src/components/charts/components/OrganizationChart/index.less

@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+.ozc_container{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .ozc_warpper{
+        top: 50%;
+        left: 50%;
+        position: absolute;
+        border-radius: 50%;
+        transform-origin: 50% 50%;
+        transition: all 200ms linear;
+        border-width: 1px;
+        &.ozc_no_inertia{
+            transition: none;
+        }
+        &::after {
+            top: 0;
+            left: 0;
+            content: "";
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            padding: 1px;
+            position: absolute;
+            border-radius: 50%;
+            background: var(--lineColor);;
+            mask-image: linear-gradient(#FFF, #FFF), linear-gradient(#FFF, #FFF);
+            mask-clip: content-box, padding-box;
+            mask-composite: exclude;
+            -webkit-mask-composite: destination-out;
+        }
+    }   
+
+    .ozc_warpper_line{
+        left: 50%;
+        width: 1px;
+        position: absolute;
+        transform: translateX(-50%);
+        background-color: #bbbbbb;
+    }
+
+    .ozc_warpper_rect{
+        left: 50%;
+        color: #5cacff;
+        line-height: 25px;
+        height: 25px;
+        width: 40px;
+        text-align: center;
+        font-size: 12px;
+        background-color: #fff;
+        position: absolute;
+        border-radius: 4px;
+        transform: translateX(-50%);
+        border: 1px solid #5cacff;
+    }
+
+    .ozc_warpper_empty{
+        left: 50%;
+        display: none;
+        font-size: 18px;
+        color: #bbbbbb;
+        text-align: center;
+        position: absolute;
+        transform: translateX(-50%);
+    }
+}
+
+// 深色主题
+.ozc_container_dark.ozc_container {
+    .ozc_warpper{
+        border-color: #676767;
+    }
+    .ozc_warpper_line{
+        background-color: #676767;
+    }
+    .ozc_warpper_rect{
+        color: #eeeeee;
+        border-color: #eeeeee;
+        background-color: #2e94ff;
+    }
+    .ozc_warpper_empty{
+        color: #bbbbbb;
+    }
+}
+
+.ozc_card{
+    width: 0;
+    height: 0;
+    position: absolute;
+    transition: all 100ms linear;
+    &.ozc_no_inertia{
+        transition: none;
+    }
+    img{
+        -webkit-user-drag:none;
+    }
+}

package/src/components/charts/components/PieChart/chartToken.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Token from '../../feature/token';
+import {CHART_TYPE} from '../../util/constants'
+
+const chartToken = Token.getTokenByName(CHART_TYPE.PIE)
+
+export default chartToken;

package/src/components/charts/components/PieChart/handleLabel.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import merge from '../../util/merge';
+import chartToken from './chartToken';
+
+function handleLabel(hasLabel, seriesUnit) {
+  if (hasLabel) {
+    seriesUnit.label = merge({ color: chartToken.labelColor, fontSize: chartToken.labelFontSize }, seriesUnit.label);
+  } else {
+    seriesUnit.label = { show: false };
+  }
+}
+
+function handleLabelLine(hasLabelLine, seriesUnit, label) {
+  const lineColor = label?.lineColor;
+  const lineLength = label?.labelLineLength ?? chartToken.labelLineLength;
+  if (hasLabelLine) {
+    seriesUnit.labelLine = merge(
+      {
+        show: true,
+        lineStyle: {
+          color: lineColor ? lineColor : chartToken.labelLineColor,
+        },
+        length: lineLength,
+        length2: lineLength / 2,
+      },
+      seriesUnit.labelLine,
+    );
+  } else {
+    seriesUnit.labelLine = {
+      show: false,
+      length: lineLength,
+      length2: lineLength / 2,
+    };
+  }
+}
+
+function hasLabelFormatterFun(labelFormatterType, seriesUnit, sum) {
+  switch (labelFormatterType) {
+    case 'percent':
+      seriesUnit.label.formatter = params => {
+        if (params.value === 0) {
+          return '0(0 %)';
+        } else {
+          const percent = ((params.value * 100) / sum).toFixed(2);
+          return `${percent} %`;
+        }
+      };
+      break;
+    case 'value':
+      seriesUnit.label.formatter = params => {
+        return `${params.value}`;
+      };
+      break;
+    default:
+      break;
+  }
+}
+
+function handleLabelFormatter(hasLabel, hasLabelFormatter, seriesUnit, labelFormatterType, sum) {
+  if (hasLabel && hasLabelFormatter) {
+    seriesUnit.label.formatter = hasLabelFormatter;
+  } else {
+    hasLabelFormatterFun(labelFormatterType, seriesUnit, sum);
+  }
+}
+
+/**
+ * 配置圆盘图的label
+ */
+function setLabel(seriesUnit, label, data) {
+  const hasLabel = !(label && label.show === false);
+  const hasLabelLine = !(label && label.line === false);
+  const hasLabelFormatter = label && label.labelHtml;
+  const labelFormatterType = (label && label.type) || '';
+  let sum = data.reduce((x, y) => ({ value: x.value + y.value }), { value: 0 });
+  sum = sum.value;
+  handleLabel(hasLabel, seriesUnit, label);
+  handleLabelLine(hasLabelLine, seriesUnit, label);
+  handleLabelFormatter(hasLabel, hasLabelFormatter, seriesUnit, labelFormatterType, sum);
+  // 合并label其他属性
+  merge(seriesUnit.label, label);
+}
+
+export default setLabel;