@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/components/TimelineChart/timeline.js

@@ -0,0 +1,461 @@
+/**
+ * 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 { formatDate } from '../../util/convert';
+import defendXSS from '../../util/defendXSS';
+import Token from '../../feature/token';
+import chartToken from './chartToken';
+
+export default class TimeLine {
+    constructor(
+        canvasId,
+        currentTime,
+        option
+    ) {
+        this.canvas = document.getElementById(canvasId);
+        this.ctx = this.canvas.getContext('2d');
+
+        // 获取配置项
+        this.option = option;
+        // 当前时间
+        this.currentTime = currentTime;
+        // 自定义时间轴的背景色
+        this.canvas.style.background = this.option.background || 'transparent';
+        // 自定义时间轴刻度线的颜色
+        this.axisLineColor = (this.option.axisLineStyle && this.option.axisLineStyle.color) || Token.config.xAxisTickLineColor;
+        // 自定义时间轴文本颜色
+        this.labelColor = (this.option.labelStyle && this.option.labelStyle.color) || Token.config.xAxisLabelColor;
+        // 整个时间轴的时间
+        this.totalHours = null;
+        // 刻度间隔(分钟)
+        this.minuteStep = [1, 2, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 720, 1440];
+        // 最小刻度间距20px
+        this.minScaleSpacing = 20;
+        // 允许的最小大格长度px值 如果调小 大格会变密集
+        this.minLargeScaleSpacing = 80;
+        // 缩放层级
+        this.zoom = 24;
+        // 鼠标选中位置
+        this.selectedPosition = [];
+        // 弹窗定时器
+        this.setTipTimeOut = null;
+        // 初始化时间轴
+        this.init();
+
+        const _this = this;
+        this.eventListener = {
+            mouseup(event) {
+                _this.clickEvent(event);
+                _this.hoverMove(event);
+            },
+            mousemove(event) {
+                _this.hoverMove(event);
+            },
+            mouseleave(event) {
+                _this.init();
+                document.getElementsByClassName('timeline_hoverPointer')[0].style.display = 'none';
+                document.getElementsByClassName('timeline_hoverTooltip')[0].style.display = 'none';
+            }
+        };
+        this.canvas.addEventListener('mousemove', this.eventListener.mousemove);
+        this.canvas.addEventListener('mouseup', this.eventListener.mouseup);
+        this.canvas.addEventListener('mouseleave', this.eventListener.mouseleave);
+    }
+
+    init() {
+        // 更新初始时间戳
+        this.refreshStartTimestamp();
+        // 清空画布
+        this.clearCanvas();
+        // 画刻度
+        this.drawScale();
+        // 画当前时间游标
+        this.option.currentTime && this.drawCursor(this.option.currentTime);
+        // 画warning事件
+        this.option.alarmData && this.drawAlarm(this.option);
+        // 画状态区间背景
+        this.drawRoundRect(20, this.canvas.height - 40, this.canvas.width - 40, 8, [4, 4, 4, 4]);
+        // 画状态区间
+        this.option.statusRangeData && this.drawStatusRange(this.option);
+    }
+
+    // 更新初始时间戳
+    refreshStartTimestamp() {
+        if (this.option.timeRange !== undefined) {
+            this.totalHours = (this.option.timeRange.endTime - this.option.timeRange.startTime) / (60 * 60 * 1000)
+        }
+        // 当currentTime改变或者整个时间轴的totalHours改变的时候 就刷新左边开始时间
+        this.startTimestamp = this.option.timeRange && this.option.timeRange.startTime || this.currentTime - (this.totalHours * 60 * 60 * 1000);
+    }
+
+    // 清空画布
+    clearCanvas() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    // 画刻度
+    drawScale() {
+        // px/分钟
+        let oneMinutePx = (this.canvas.width - 40) / (this.totalHours * 60);
+        // px/毫秒
+        let oneMSPx = oneMinutePx / (60 * 1000);
+        // 刻度间隔 默认20px
+        let scaleSpacing = this.minScaleSpacing;
+        // 每格代表多少分钟
+        let scaleUnit = scaleSpacing / oneMinutePx;
+
+        let len = this.minuteStep.length;
+        // 配置项刻度间隔
+        if (this.option.interval !== undefined) {
+            scaleUnit = this.option.interval;
+            scaleSpacing = oneMinutePx * scaleUnit;
+        }
+        // 自动根据画布长度选择合适的刻度间隔
+        else {
+            for (let i = 0; i < len; i++) {
+                if (scaleUnit < this.minuteStep[i]) {
+                    scaleUnit = this.minuteStep[i];
+                    scaleSpacing = oneMinutePx * scaleUnit;
+                    break;
+                }
+            }
+        }
+
+        // 大刻度相当于多少分钟
+        let mediumStep = 30;
+        if (this.option.mediumStep !== undefined) {
+            mediumStep = this.option.mediumStep;
+        }
+        else {
+            for (let i = 0; i < len; i++) {
+                if (this.minLargeScaleSpacing / oneMinutePx <= this.minuteStep[i]) {
+                    mediumStep = this.minuteStep[i];
+                    break;
+                }
+            }
+        }
+
+        let totalScales = (this.canvas.width - 40) / scaleSpacing;
+        // 某个刻度距离最左端的距离
+        let scaleLeft = 0;
+        // 某个刻度的时间
+        let scaleTime = this.startTimestamp;
+        let lineHeight;
+        let leftOffsetMs = scaleUnit * 60 * 1000 - (this.startTimestamp % (scaleUnit * 60 * 1000));
+        // 开始时间偏移距离(px)
+        let leftOffsetPx = leftOffsetMs * oneMSPx;
+        // 一刻度多少毫秒
+        let oneScalesMS = scaleSpacing / oneMSPx;
+        let scaleLineHeight = this.canvas.height - 30;
+
+        // 画刻度线和标签
+        for (let i = 0; i < totalScales + 1; i++) {
+            let date = new Date(scaleTime);
+            if ((scaleTime / (60 * 1000)) % mediumStep === 0) {
+                // 大格刻度标签长度
+                lineHeight = 6;
+                let scaleText = this.createScaleText(date);
+                this.ctx.font = 'normal 12px HarmonyOS_Sans';
+                // 文字颜色
+                this.ctx.fillStyle = this.labelColor;
+                this.ctx.fillText(scaleText, scaleLeft + 20 - this.ctx.measureText(scaleText).width / 2, this.canvas.height - 4);
+            } else {
+                // 小格刻度标签长度
+                lineHeight = 3;
+            }
+            this.ctx.beginPath();
+            this.ctx.moveTo(scaleLeft + 20, scaleLineHeight);
+            this.ctx.lineTo(scaleLeft + 20, scaleLineHeight + lineHeight);
+            this.ctx.closePath();
+            this.ctx.lineWidth = 1;
+            // 刻度线颜色
+            this.ctx.strokeStyle = this.axisLineColor;
+            this.ctx.stroke();
+            // 距离 = 开始偏移距离 + 格数 * 每格得px;
+            scaleLeft = leftOffsetPx + i * scaleSpacing;
+            // 时间 = 左侧开始时间 + 偏移时间 + 格数 * 一格多少毫秒
+            scaleTime = this.startTimestamp + leftOffsetMs + i * oneScalesMS;
+        }
+    }
+
+    // 画当前时间游标
+    drawCursor(currentTime) {
+        this.selectedPosition.push(this.getTimePos(currentTime), formatDate(currentTime, 'hh:mm'));
+        this.drawSelectedPointer(this.selectedPosition);
+    }
+
+    // 叠加warning事件圆点
+    drawAlarm(option) {
+        const alarmData = option.alarmData;
+        const background = option.customBackground;
+        for (let i = 0; i < alarmData.length; i++) {
+            let x = this.getTimePos(alarmData[i].time);
+            let type = alarmData[i].type;
+            this.ctx.beginPath();
+            this.ctx.arc(x, this.canvas.height - 60, 7, 0, 2 * Math.PI);
+            this.ctx.closePath();
+            this.ctx.fillStyle = background[type] || Token.config.colorState.colorNone;
+            this.ctx.fill();
+        }
+    }
+
+    // 叠加状态区间
+    drawStatusRange(option) {
+        const statusRangeData = option.statusRangeData;
+        const timeRange = option.timeRange;
+        const background = option.customBackground;
+        for (let i = 0; i < statusRangeData.length; i++) {
+            let startPosition = this.getTimePos(statusRangeData[i].time[0]);
+            let endPosition = this.getTimePos(statusRangeData[i].time[1]);
+            let type = statusRangeData[i].type;
+            this.ctx.beginPath();
+            if (statusRangeData[i].time[0] === timeRange.startTime && statusRangeData[i].time[1] === timeRange.endTime) {
+                this.roundRect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8, [4, 4, 4, 4])
+            } else if (statusRangeData[i].time[0] === timeRange.startTime) {
+                this.roundRect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8, [4, 0, 0, 4]);
+            } else if (statusRangeData[i].time[1] === timeRange.endTime) {
+                this.roundRect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8, [0, 4, 4, 0]);
+            } else {
+                this.ctx.rect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8);
+            }
+            this.ctx.closePath();
+            this.ctx.fillStyle = background[type] || Token.config.colorState.colorNone;
+            this.ctx.fill();
+        }
+    }
+
+    // 绘制状态区间背景的圆角矩形
+    drawRoundRect(x, y, width, height, radius) {
+        this.ctx.beginPath();
+        this.roundRect(x, y, width, height, radius);
+        this.ctx.closePath();
+        this.ctx.fillStyle = chartToken.roundRectBg;
+        this.ctx.fill();
+    }
+
+    roundRect(x, y, width, height, radiusArray) {
+        // 左上角
+        this.ctx.moveTo(x + radiusArray[0], y);
+        this.ctx.lineTo(x + width - radiusArray[1], y);
+        this.ctx.arcTo(x + width, y, x + width, y + radiusArray[1], radiusArray[1]);
+        // 右上角
+        this.ctx.lineTo(x + width, y + height - radiusArray[2]);
+        this.ctx.arcTo(x + width, y + height, x + width - radiusArray[2], y + height, radiusArray[2]);
+        // 右下角
+        this.ctx.lineTo(x + radiusArray[3], y + height);
+        this.ctx.arcTo(x, y + height, x, y + height - radiusArray[3], radiusArray[3]);
+        // 左下角
+        this.ctx.lineTo(x, y + radiusArray[0]);
+        this.ctx.arcTo(x, y, x + radiusArray[0], y, radiusArray[0]);
+    }
+
+    // 鼠标悬浮事件
+    hoverMove(event) {
+        const mouseX = this.getMouseXRelativePos(event);
+        const hoverPointer = document.getElementsByClassName('timeline_hoverPointer')[0];
+        const hoverTooltip = document.getElementsByClassName('timeline_hoverTooltip')[0];
+        const hoverTime = this.getMousePosTime(event);
+        if (mouseX > 0 && mouseX < this.canvas.width - 40) {
+            this.showElement(hoverPointer);
+            // 开启悬浮指针的时间悬浮框
+            if (this.option.timeTooltip === true) {
+                this.showElement(hoverTooltip);
+                hoverTooltip.innerHTML = `<p>${formatDate(hoverTime, 'yy-MM-dd hh:mm')}</p>`;
+                if (mouseX + 142 > this.canvas.width - 40) {
+                    hoverTooltip.style.left = mouseX - 1 + 20 - 142 + 'px';
+                }
+                else {
+                    hoverTooltip.style.left = mouseX - 1 + 30 + 'px';
+                }
+                hoverTooltip.style.top = this.canvas.height - 30 + 'px';
+            }
+            hoverPointer.style.left = mouseX - 1 + 20 + 'px';
+            hoverPointer.style.top = this.canvas.height - 30 + 'px';
+        } else {
+            this.hideElement(hoverPointer);
+            this.hideElement(hoverTooltip);
+        }
+        this.setAlarmTip(event, mouseX);
+    }
+
+    // 设置Alarm点的tip
+    setAlarmTip(event, mouseX) {
+        const mouseY = this.getMouseYRelativePos(event);
+        const alarmTooltip = document.getElementsByClassName('timeline_alarmTooltip')[0];
+        // 清除定时
+        alarmTooltip.addEventListener('mouseenter', (e) => {
+            if (this.setTipTimeOut) { clearTimeout(this.setTipTimeOut); }
+        });
+        // 移出悬浮框关闭
+        alarmTooltip.addEventListener('mouseleave', (e) => {
+            this.closeAlarmTip(alarmTooltip);
+        });
+        const alarmData = this.option.alarmData;
+        if (alarmData) {
+            this.processAlarmData(alarmData, mouseX, mouseY, alarmTooltip);
+        }
+    }
+
+    closeAlarmTip(alarmTooltip) {
+        // 增加延时
+        this.setTipTimeOut = setTimeout(() => {
+            this.hideElement(alarmTooltip);
+        }, 200);
+    }
+
+    processAlarmData(alarmData, mouseX, mouseY, alarmTooltip) {
+        for (const data of alarmData) {
+            const x = this.getTimePos(data.time);
+            if (this.isMouseInCircle(mouseX + 20, mouseY, x, this.canvas.height - 60)) {
+                if (this.setTipTimeOut) { clearTimeout(this.setTipTimeOut); }
+                this.showElement(alarmTooltip);
+                this.option.onCircleHover(alarmTooltip, data);
+                if ((x - (alarmTooltip.offsetWidth) / 2) < 0) {
+                    alarmTooltip.style.left = '0px'
+                } else if ((x - (alarmTooltip.offsetWidth) / 2) > (this.canvas.width - alarmTooltip.offsetWidth - 40)) {
+                    alarmTooltip.style.left = this.canvas.width - (alarmTooltip.offsetWidth) + 'px'
+                } else {
+                    alarmTooltip.style.left = x - (alarmTooltip.offsetWidth / 2) + 'px';
+                }
+                alarmTooltip.style.top = this.canvas.height - 80 - (alarmTooltip.clientHeight) + 'px';
+                return;
+            }
+            // 移出圆点清除悬浮框
+            if (this.setTipTimeOut) { clearTimeout(this.setTipTimeOut); }
+            this.closeAlarmTip(alarmTooltip);
+        }
+    }
+
+    // 判断鼠标是否在圆点内
+    isMouseInCircle(mouseX, mouseY, x, y) {
+        let distance = Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2);
+        return distance <= 8;
+    }
+
+    // 鼠标点击事件
+    clickEvent(event) {
+        // 进入选中状态
+        this.isSelected = true;
+        const mouseX = this.getMouseXRelativePos(event);
+        const time = this.getMousePosTime(event);
+        // 选中时间
+        const seletedTime = time.getTime();
+        // 当前北京时间
+        const currentTime = new Date().getTime();
+        // 选中时间小于当前时间以及大于开始时间，不可选中未来时间
+        if (seletedTime <= currentTime && seletedTime >= this.option.timeRange.startTime ) {
+            this.option.onClick && this.option.onClick(time.getTime());
+            // 如果有点击时间，将时间赋值给配置项的当前时间
+            // this.option.currentTime = time;
+            this.selectedPosition.splice(0, this.selectedPosition.length);
+            this.selectedPosition.push(mouseX + 20, formatDate(time, 'hh:mm'));
+            const selectedPointer = document.getElementsByClassName('timeline_selectedPointer')[0];
+            const selectedTooltip = document.getElementsByClassName('timeline_selectedTooltip')[0];
+            const selectedCircle = document.getElementsByClassName('timeline_selectedCircle')[0];
+            if (mouseX > 0 && mouseX < (this.canvas.width - 40)) {
+                this.drawSelectedPointer(this.selectedPosition);
+            } else {
+                this.hideElement(selectedPointer);
+                this.hideElement(selectedTooltip);
+                this.hideElement(selectedCircle);
+            }
+        }
+    }
+
+    // 画选中状态的游标
+    drawSelectedPointer(selectedPosition) {
+
+        const selectedPointer = document.getElementsByClassName('timeline_selectedPointer')[0];
+        const selectedTooltip = document.getElementsByClassName('timeline_selectedTooltip')[0];
+        const selectedCircle = document.getElementsByClassName('timeline_selectedCircle')[0];
+
+        selectedPointer.style.left = selectedPosition[0] - 1 + 'px';
+        selectedPointer.style.top = this.canvas.height - 42 + 'px';
+        this.showElement(selectedPointer);
+
+        selectedTooltip.innerHTML = `<p>${defendXSS(selectedPosition[1])}</p>`;
+        selectedTooltip.style.left = selectedPosition[0] - 20 + 'px';
+        selectedTooltip.style.top = this.canvas.height - 16 + 'px';
+        this.showElement(selectedTooltip);
+
+        selectedCircle.style.left = selectedPosition[0] - 4 + 'px';
+        selectedCircle.style.top = this.canvas.height - 50 + 'px';
+        this.showElement(selectedCircle);
+    }
+
+    // 设置长短刻度标签文字
+    createScaleText(time) {
+        if (time.getTime() === this.option.timeRange.startTime) {
+            return formatDate(time, '00:00');
+        } else if (time.getTime() === this.option.timeRange.endTime && (this.option.timeRange.endTime - this.option.timeRange.startTime) % (24 * 60 * 60 * 1000) === 0) {
+            return formatDate(time, '24:00');
+        }
+        return formatDate(time, 'hh:mm');
+    }
+
+    // 获取鼠标相对于canvas元素左侧20px的相对位置
+    getMouseXRelativePos(event) {
+        let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
+        let x = event.pageX || event.clientX + scrollX;
+        // canvas元素距离窗口左侧距离
+        let baseLeft = this.canvas.getBoundingClientRect().x;
+        return x - baseLeft - 20;
+    }
+
+    // 获取鼠标相对于canvas元素上侧的相对位置
+    getMouseYRelativePos(event) {
+        let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
+        let y = event.pageY || event.clientY + scrollY;
+        // canvas元素距离窗口左侧距离
+        let baseTop = this.canvas.getBoundingClientRect().y;
+        return y - baseTop;
+    }
+
+    // 根据画布的宽度和时间计算出鼠标所在的时间点
+    getMousePosTime(event) {
+        let posX = this.getMouseXRelativePos(event);
+        // 每毫秒多少像素
+        let onePxsMS = (this.canvas.width - 40) / (this.totalHours * 60 * 60 * 1000);
+        let time = new Date(this.startTimestamp + posX / onePxsMS);
+        return time;
+    }
+
+    // 根据时间点计算所在点距离canvas左侧20px的相对位置
+    getTimePos(time) {
+        // 每毫秒多少像素
+        let onePxsMS = (this.canvas.width - 40) / (this.totalHours * 60 * 60 * 1000);
+        let posX = (time - this.startTimestamp) * onePxsMS + 20;
+        return posX;
+    }
+
+    // 显示元素
+    showElement = (element) => {
+        element.style.display = 'block';
+    };
+
+    hideElement = (element) => {
+        element.style.display = 'none';
+    };
+
+    // 设置当前时间
+    setCurrentTime(time) {
+        let newTime;
+        if (typeof time === 'string') {
+            newTime = new Date(time).getTime();
+        } else if (typeof time === 'object') {
+            newTime = time.getTime && time.getTime();
+        } else if (typeof time === 'number') {
+            newTime = time;
+        }
+        this.currentTime = newTime;
+        this.init();
+    }
+};

package/src/components/charts/components/TreeChart/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.TREE)
+
+export default chartToken;

package/src/components/charts/components/TreeChart/handleOptipn.js

@@ -0,0 +1,101 @@
+/**
+ * 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 tooltip from '../../option/config/tooltip';
+import { CHART_TYPE } from '../../util/constants';
+
+/**
+ * 配置鼠标悬浮提示框
+ */
+export function setTooltip(baseOpt, iChartOpt) {
+  const basicTip = tooltip(iChartOpt,CHART_TYPE.TREE);
+  basicTip.trigger = 'item';
+  baseOpt.tooltip = basicTip
+}
+
+/**
+ * 设置ChartPadding
+ */
+export function setChartPadding(seriesItem, type, iChartOption) {
+  let position;
+  // 默认值
+  if (type === 'RingTreeChart') {
+    position = {
+      top: 100,
+      right: 150,
+      bottom: 100,
+      left: 150,
+    }
+  }
+  if (type === 'LineTreeChart') {
+    const positionMap = {
+      left: {
+        top: 100,
+        right: 150,
+        bottom: 100,
+        left: 150,
+      },
+      top: {
+        top: 80,
+        right: 20,
+        bottom: 150,
+        left: 20,
+      },
+      bottom: {
+        top: 150,
+        right: 20,
+        bottom: 80,
+        left: 20,
+      },
+      right: {
+        top: 20,
+        right: 150,
+        bottom: 20,
+        left: 150,
+      },
+
+    }
+    const direction = iChartOption.direction || 'left'
+    position = positionMap[direction]
+  }
+
+  if (iChartOption.padding && iChartOption.padding.length > 0) {
+    if (iChartOption.padding.length === 1) {
+      position.top = iChartOption.padding[0];
+      position.right = iChartOption.padding[0];
+      position.bottom = iChartOption.padding[0];
+      position.left = iChartOption.padding[0];
+    }
+
+    if (iChartOption.padding.length === 2) {
+      position.top = iChartOption.padding[0];
+      position.right = iChartOption.padding[1];
+      position.bottom = iChartOption.padding[0];
+      position.left = iChartOption.padding[1];
+    }
+
+    if (iChartOption.padding.length === 3) {
+      position.top = iChartOption.padding[0];
+      position.right = iChartOption.padding[1];
+      position.bottom = iChartOption.padding[2];
+      position.left = iChartOption.padding[1];
+    }
+
+    if (iChartOption.padding.length === 4) {
+      position.top = iChartOption.padding[0];
+      position.right = iChartOption.padding[1];
+      position.bottom = iChartOption.padding[2];
+      position.left = iChartOption.padding[3];
+    }
+  }
+  merge(seriesItem, position);
+}