@ebiz/designer-components 0.0.18 → 0.0.19-beta.2

package/src/components/charts/components/RiverChart/baseOption.js

@@ -1,51 +1,51 @@
-/**
- * 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.
- *
- */
-function baseOption() {
-  return {
-    // 图表宽度
-    width: undefined,
-    // 图表高度
-    height: undefined,
-    // 各个阶段的宽度占比
-    depthWidth: ['25%', '50%', '25%'],
-    // 连接处的间隙
-    space: 0,
-    // 节点颜色
-    background: '#0067D1',
-    marginWidth: [
-      {
-        left: 50,
-        right: 50,
-      },
-      {
-        left: 100,
-        right: 100,
-      },
-      {
-        left: 50,
-        right: 50,
-      },
-    ],
-    // 节点之间的垂直间距
-    nodeSpace: 40,
-    scaleBar: 8,
-    statusColor: {
-      1: '#0067D1',
-      2: '#BBC0C7',
-      3: '#0067D1',
-    },
-    smoothingCurves: false,
-    // 控制河流和顶部的距离
-    offsetY: 0,
-  };
-}
-export default baseOption;
+/**
+ * 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.
+ *
+ */
+function baseOption() {
+  return {
+    // 图表宽度
+    width: undefined,
+    // 图表高度
+    height: undefined,
+    // 各个阶段的宽度占比
+    depthWidth: ['25%', '50%', '25%'],
+    // 连接处的间隙
+    space: 0,
+    // 节点颜色
+    background: '#0067D1',
+    marginWidth: [
+      {
+        left: 50,
+        right: 50,
+      },
+      {
+        left: 100,
+        right: 100,
+      },
+      {
+        left: 50,
+        right: 50,
+      },
+    ],
+    // 节点之间的垂直间距
+    nodeSpace: 40,
+    scaleBar: 8,
+    statusColor: {
+      1: '#0067D1',
+      2: '#BBC0C7',
+      3: '#0067D1',
+    },
+    smoothingCurves: false,
+    // 控制河流和顶部的距离
+    offsetY: 0,
+  };
+}
+export default baseOption;

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

@@ -1,79 +1,79 @@
-/**
- * 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 baseOption from './baseOption';
-import Manager from './Manager';
-import { setChartSize, initWrapper } from './util';
-import { CHART_TYPE } from '../../util/constants';
-
-export default class RiverChart {
-
-  static name = CHART_TYPE.RIVER
-
-  // 配置项
-  option = {};
-  // 整个图表容器
-  container = null;
-  // 图表的外层wrapper
-  wrapper = null;
-  // 节点的容器
-  nodeContainer = null;
-  // svg容器
-  svgElement = null;
-  // 图表容器大小
-  containerSize = {
-    width: 0,
-    height: 0,
-  };
-  manager = null;
-
-  // 初始化
-  init(container) {
-    this.container = container;
-    this.beforeRender();
-    const _this = this;
-    initWrapper(this.container, _this);
-    // 算出容器的大小
-    const size = container.getBoundingClientRect();
-    this.containerSize.width = size.width;
-    this.containerSize.height = size.height;
-  }
-
-  beforeRender() {
-    // 刷新图表的时候清空内部的节点
-    if (this.container) this.container.innerHTML = '';
-  }
-
-  // 设置图表的配置项
-  setOption(option) {
-    this.option = Object.assign(baseOption(), option);
-    setChartSize(this.svgElement, this.nodeContainer, this.option);
-    if (this.svgElement) this.svgElement.innerHTML = '';
-    if (this.nodeContainer) this.nodeContainer.innerHTML = '';
-    this.render();
-  }
-
-  render() {
-    const { data, width } = this.option;
-    if (!width) {
-      this.option.width = this.containerSize.width;
-      this.option.height = this.containerSize.height;
-    }
-    this.manager = new Manager(this.svgElement, this.nodeContainer, this.option, data);
-    this.manager.init();
-    this.manager.render();
-  }
-
-  destory() {
-    this.container.innerHTML = '';
-    this.manager = null;
-  }
-}
+/**
+ * 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 baseOption from './baseOption';
+import Manager from './Manager';
+import { setChartSize, initWrapper } from './util';
+import { CHART_TYPE } from '../../util/constants';
+
+export default class RiverChart {
+
+  static name = CHART_TYPE.RIVER
+
+  // 配置项
+  option = {};
+  // 整个图表容器
+  container = null;
+  // 图表的外层wrapper
+  wrapper = null;
+  // 节点的容器
+  nodeContainer = null;
+  // svg容器
+  svgElement = null;
+  // 图表容器大小
+  containerSize = {
+    width: 0,
+    height: 0,
+  };
+  manager = null;
+
+  // 初始化
+  init(container) {
+    this.container = container;
+    this.beforeRender();
+    const _this = this;
+    initWrapper(this.container, _this);
+    // 算出容器的大小
+    const size = container.getBoundingClientRect();
+    this.containerSize.width = size.width;
+    this.containerSize.height = size.height;
+  }
+
+  beforeRender() {
+    // 刷新图表的时候清空内部的节点
+    if (this.container) this.container.innerHTML = '';
+  }
+
+  // 设置图表的配置项
+  setOption(option) {
+    this.option = Object.assign(baseOption(), option);
+    setChartSize(this.svgElement, this.nodeContainer, this.option);
+    if (this.svgElement) this.svgElement.innerHTML = '';
+    if (this.nodeContainer) this.nodeContainer.innerHTML = '';
+    this.render();
+  }
+
+  render() {
+    const { data, width } = this.option;
+    if (!width) {
+      this.option.width = this.containerSize.width;
+      this.option.height = this.containerSize.height;
+    }
+    this.manager = new Manager(this.svgElement, this.nodeContainer, this.option, data);
+    this.manager.init();
+    this.manager.render();
+  }
+
+  destory() {
+    this.container.innerHTML = '';
+    this.manager = null;
+  }
+}

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

@@ -1,42 +1,42 @@
-/**
- * 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.
- *
- */
-.rc_wrapper{
-   width: 100%;
-   height: 100%;
-   position: relative;
-   padding: 0;
-   margin: 0;
-}
-
-.rc_node_container{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left:0;
-    top: 0;
-    background:transparent;
-    padding: 0;
-    margin: 0;
-}
-
-.rc_svg_container{
-    width: 100%;
-    height: 100%;
-    position: relative;
-    padding: 0;
-    margin: 0;
-}
-.rc_node{
-    position: absolute;
-    left: 0;
-    top: 0;
+/**
+ * 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.
+ *
+ */
+.rc_wrapper{
+   width: 100%;
+   height: 100%;
+   position: relative;
+   padding: 0;
+   margin: 0;
+}
+
+.rc_node_container{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left:0;
+    top: 0;
+    background:transparent;
+    padding: 0;
+    margin: 0;
+}
+
+.rc_svg_container{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    padding: 0;
+    margin: 0;
+}
+.rc_node{
+    position: absolute;
+    left: 0;
+    top: 0;
 }

package/src/components/charts/components/RiverChart/util.js

@@ -1,160 +1,160 @@
-/**
- * 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.
- *
- */
-// 创建svg元素
-function renderSvgDom(type, property) {
-  const version = 'http://www.w3.org/2000/svg';
-  const svgEl = document.createElementNS(version, type);
-  if (property) {
-    const keys = Object.keys(property);
-    keys.forEach(key => {
-      svgEl.setAttribute(key, property[key]);
-    });
-  }
-  return svgEl;
-}
-
-// 创造元素
-function createEl(elName) {
-  return document.createElement(elName);
-}
-
-// 设置样式
-function setStyle(target, key, value) {
-  target.style[key] = value;
-}
-
-// 添加元素
-function appendEL(parNode, chiNode) {
-  parNode.appendChild(chiNode);
-}
-
-// 判断数组
-function isArray(data) {
-  return Object.prototype.toString.call(data) === '[object Array]' ? true : false;
-}
-
-// 给指定dom添加class类名，classList为数组类型
-function addClass(riverDom, classes) {
-  if (isArray(classes)) {
-    classes.forEach(cls => {
-      riverDom.classList.add(cls);
-    });
-  } else {
-    riverDom.classList.add(classes);
-  }
-}
-
-// 给指定dom添加或更改属性
-function attr(dom, key, value) {
-  dom.setAttribute(key, value);
-}
-
-function getPathD(point) {
-  const { x1, y1, x2, y2, x3, y3, x4, y4 } = point;
-  // 两个节点之间的距离用来算贝塞尔曲线的控制点
-  const distance = (x3 - x1) / 2;
-
-  let path;
-
-  // 前后节点在同一水平线，高度也相等
-  if (y1 === y3 && y2 === y4) {
-    path = `M${x1} ${y1} L${x3} ${y3} L${x4} ${y4} L${x2} ${y2} L${x1} ${y1}Z`;
-  }
-
-  // 前后节点顶部同一水平线
-  if (y1 === y3 && y2 !== y4) {
-    path = `M${x1} ${y1} L${x3} ${y3} L${x4} ${y4} C${x4 - distance} ${y4} ${
-      x2 + distance
-    } ${y2} ${x2} ${y2} L${x1} ${y1}Z`;
-  }
-
-  // 前后节点底部同一水平线
-  if (y1 !== y3 && y2 === y4) {
-    path = `M${x1} ${y1} C${x1 + distance} ${y1} ${
-      x3 - distance
-    } ${y3} ${x3} ${y3} L${x4} ${y4} L${x2} ${y2} L${x1} ${y1}Z`;
-  }
-
-  // 前后节点交错重合
-  if (y1 !== y3 && y2 !== y4) {
-    path = `M${x1} ${y1} C${x1 + distance} ${y1} ${x3 - distance} ${y3} ${x3} ${y3} L${x4} ${y4} C${
-      x4 - distance
-    } ${y4} ${x2 + distance} ${y2} ${x2} ${y2} L${x1} ${y1}Z`;
-  }
-
-  return path;
-}
-
-function getSmoothPathD(point, height) {
-  const { x1, y1, x3, y3 } = point;
-  // 两个节点之间的距离用来算贝塞尔曲线的控制点
-  const distance = (x3 - x1) / 2;
-  let path;
-  if (y1 === y3) {
-    path = `M${x1} ${y1 - height / 2} L${x3} ${y3 - height / 2} L${x3} ${y3 + height / 2} L${x1} ${y1 + height / 2}Z`;
-  } else {
-    path = `M${x1} ${y1} C${x1 + distance} ${y1} ${x3 - distance} ${y3} ${x3} ${y3}`;
-  }
-  return path;
-}
-
-function setChartSize(svgContainer, nodeContainer, option) {
-  const { width, height } = option;
-  if (width) {
-    setStyle(svgContainer, 'width', `${width}px`);
-    setStyle(nodeContainer, 'width', `${width}px`);
-  }
-  if (height) {
-    setStyle(svgContainer, 'height', `${height}px`);
-    setStyle(nodeContainer, 'height', `${height}px`);
-  }
-}
-
-function initSvgContainer(wrapper, _this) {
-  const svgEl = renderSvgDom('svg');
-  _this.svgElement = svgEl;
-  attr(svgEl, 'xmlns', 'http://www.w3.org/2000/svg');
-  attr(svgEl, 'version', '1.1');
-  attr(svgEl, 'width', '100%');
-  attr(svgEl, 'height', '100%');
-  attr(svgEl, 'class', 'rc_svg_container');
-  appendEL(wrapper, svgEl);
-}
-
-function initNodeContainer(wrapper, _this) {
-  const nodeContainerEl = createEl('div');
-  _this.nodeContainer = nodeContainerEl;
-  addClass(nodeContainerEl, 'rc_node_container');
-  appendEL(wrapper, nodeContainerEl);
-}
-
-function initWrapper(container, _this) {
-  const wrapperEl = createEl('div');
-  _this.wrapper = wrapperEl;
-  addClass(wrapperEl, 'rc_wrapper');
-  appendEL(container, wrapperEl);
-  initSvgContainer(wrapperEl, _this);
-  initNodeContainer(wrapperEl, _this);
-}
-
-export {
-  setChartSize,
-  renderSvgDom,
-  setStyle,
-  createEl,
-  appendEL,
-  addClass,
-  attr,
-  getPathD,
-  getSmoothPathD,
-  initWrapper,
-};
+/**
+ * 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.
+ *
+ */
+// 创建svg元素
+function renderSvgDom(type, property) {
+  const version = 'http://www.w3.org/2000/svg';
+  const svgEl = document.createElementNS(version, type);
+  if (property) {
+    const keys = Object.keys(property);
+    keys.forEach(key => {
+      svgEl.setAttribute(key, property[key]);
+    });
+  }
+  return svgEl;
+}
+
+// 创造元素
+function createEl(elName) {
+  return document.createElement(elName);
+}
+
+// 设置样式
+function setStyle(target, key, value) {
+  target.style[key] = value;
+}
+
+// 添加元素
+function appendEL(parNode, chiNode) {
+  parNode.appendChild(chiNode);
+}
+
+// 判断数组
+function isArray(data) {
+  return Object.prototype.toString.call(data) === '[object Array]' ? true : false;
+}
+
+// 给指定dom添加class类名，classList为数组类型
+function addClass(riverDom, classes) {
+  if (isArray(classes)) {
+    classes.forEach(cls => {
+      riverDom.classList.add(cls);
+    });
+  } else {
+    riverDom.classList.add(classes);
+  }
+}
+
+// 给指定dom添加或更改属性
+function attr(dom, key, value) {
+  dom.setAttribute(key, value);
+}
+
+function getPathD(point) {
+  const { x1, y1, x2, y2, x3, y3, x4, y4 } = point;
+  // 两个节点之间的距离用来算贝塞尔曲线的控制点
+  const distance = (x3 - x1) / 2;
+
+  let path;
+
+  // 前后节点在同一水平线，高度也相等
+  if (y1 === y3 && y2 === y4) {
+    path = `M${x1} ${y1} L${x3} ${y3} L${x4} ${y4} L${x2} ${y2} L${x1} ${y1}Z`;
+  }
+
+  // 前后节点顶部同一水平线
+  if (y1 === y3 && y2 !== y4) {
+    path = `M${x1} ${y1} L${x3} ${y3} L${x4} ${y4} C${x4 - distance} ${y4} ${
+      x2 + distance
+    } ${y2} ${x2} ${y2} L${x1} ${y1}Z`;
+  }
+
+  // 前后节点底部同一水平线
+  if (y1 !== y3 && y2 === y4) {
+    path = `M${x1} ${y1} C${x1 + distance} ${y1} ${
+      x3 - distance
+    } ${y3} ${x3} ${y3} L${x4} ${y4} L${x2} ${y2} L${x1} ${y1}Z`;
+  }
+
+  // 前后节点交错重合
+  if (y1 !== y3 && y2 !== y4) {
+    path = `M${x1} ${y1} C${x1 + distance} ${y1} ${x3 - distance} ${y3} ${x3} ${y3} L${x4} ${y4} C${
+      x4 - distance
+    } ${y4} ${x2 + distance} ${y2} ${x2} ${y2} L${x1} ${y1}Z`;
+  }
+
+  return path;
+}
+
+function getSmoothPathD(point, height) {
+  const { x1, y1, x3, y3 } = point;
+  // 两个节点之间的距离用来算贝塞尔曲线的控制点
+  const distance = (x3 - x1) / 2;
+  let path;
+  if (y1 === y3) {
+    path = `M${x1} ${y1 - height / 2} L${x3} ${y3 - height / 2} L${x3} ${y3 + height / 2} L${x1} ${y1 + height / 2}Z`;
+  } else {
+    path = `M${x1} ${y1} C${x1 + distance} ${y1} ${x3 - distance} ${y3} ${x3} ${y3}`;
+  }
+  return path;
+}
+
+function setChartSize(svgContainer, nodeContainer, option) {
+  const { width, height } = option;
+  if (width) {
+    setStyle(svgContainer, 'width', `${width}px`);
+    setStyle(nodeContainer, 'width', `${width}px`);
+  }
+  if (height) {
+    setStyle(svgContainer, 'height', `${height}px`);
+    setStyle(nodeContainer, 'height', `${height}px`);
+  }
+}
+
+function initSvgContainer(wrapper, _this) {
+  const svgEl = renderSvgDom('svg');
+  _this.svgElement = svgEl;
+  attr(svgEl, 'xmlns', 'http://www.w3.org/2000/svg');
+  attr(svgEl, 'version', '1.1');
+  attr(svgEl, 'width', '100%');
+  attr(svgEl, 'height', '100%');
+  attr(svgEl, 'class', 'rc_svg_container');
+  appendEL(wrapper, svgEl);
+}
+
+function initNodeContainer(wrapper, _this) {
+  const nodeContainerEl = createEl('div');
+  _this.nodeContainer = nodeContainerEl;
+  addClass(nodeContainerEl, 'rc_node_container');
+  appendEL(wrapper, nodeContainerEl);
+}
+
+function initWrapper(container, _this) {
+  const wrapperEl = createEl('div');
+  _this.wrapper = wrapperEl;
+  addClass(wrapperEl, 'rc_wrapper');
+  appendEL(container, wrapperEl);
+  initSvgContainer(wrapperEl, _this);
+  initNodeContainer(wrapperEl, _this);
+}
+
+export {
+  setChartSize,
+  renderSvgDom,
+  setStyle,
+  createEl,
+  appendEL,
+  addClass,
+  attr,
+  getPathD,
+  getSmoothPathD,
+  initWrapper,
+};