evui 3.3.36 → 3.3.39

package/src/components/chart/plugins/plugins.pie.js

@@ -1,254 +1,254 @@
-const modules = {
-  pieDataSet: [],
-  /**
-   * Draw series data
-   *
-   * @params hitInfo
-   *
-   * @returns {undefined}
-   */
-  drawPie(hitInfo) {
-    const ctx = this.bufferCtx;
-    const chartRect = this.chartRect;
-    const pieDataSet = this.pieDataSet;
-    const pieOption = this.options;
-    const padding = this.options.padding;
-    const isDoughnut = !!pieOption.doughnutHoleSize;
-
-    let slice;
-    let value;
-    let sliceAngle;
-    let startAngle = 1.5 * Math.PI;
-    let endAngle;
-    let series;
-    let percentage;
-
-    const centerX = chartRect.width / 2;
-    const centerY = chartRect.height / 2;
-
-    const chartWidth = centerX - (padding.left + padding.right);
-    const chartHeight = centerY - (padding.bottom + padding.top);
-    if ((typeof chartWidth === 'number' && chartWidth < 0)
-      || (typeof chartHeight === 'number' && chartHeight < 0)) {
-      return;
-    }
-
-    const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
-    const outerRadius = Math.min(chartWidth, chartHeight);
-
-    for (let ix = 0; ix < pieDataSet.length; ix++) {
-      const pie = pieDataSet[ix];
-      if (!pie) {
-        return;
-      }
-
-      let radius = outerRadius - (((outerRadius - innerRadius) / pieDataSet.length) * ix);
-      if (pieOption?.pieStroke?.use) {
-        radius -= pieOption.pieStroke.lineWidth;
-      }
-
-      if (radius < 0) {
-        return;
-      }
-
-      pie.or = radius;
-      if (ix < pieDataSet.length - 1) {
-        pie.ir = outerRadius - (((outerRadius - innerRadius) / pieDataSet.length) * (ix + 1));
-      } else {
-        pie.ir = 1;
-      }
-
-      if (pie.total) {
-        for (let jx = 0; jx < pie.data.length; jx++) {
-          slice = pie.data[jx];
-          value = slice.value;
-          percentage = (value / pie.total) * 100;
-          sliceAngle = 2 * Math.PI * (value / pie.total);
-          endAngle = startAngle + sliceAngle;
-
-          slice.sa = startAngle;
-          slice.ea = endAngle;
-          series = this.seriesList[slice.id];
-
-          if (value) {
-            const strokeOptions = { ...pieOption.pieStroke };
-            if (pie.data.length === 1 && pieOption.pieStroke.use) {
-              strokeOptions.use = false;
-
-              ctx.lineWidth = pieOption.pieStroke.lineWidth;
-              ctx.strokeStyle = pieOption.pieStroke.color;
-              ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-              ctx.stroke();
-            }
-
-            const { selectInfo, legendHitInfo } = hitInfo;
-            series.isSelect = selectInfo?.sId === slice.id;
-            series.isDownplay = (legendHitInfo && legendHitInfo.sId !== slice.id);
-            series.type = isDoughnut ? 'doughnut' : 'pie';
-            series.centerX = centerX;
-            series.centerY = centerY;
-            series.radius = radius;
-            series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
-            series.startAngle = startAngle;
-            series.endAngle = endAngle;
-            series.data = { o: value, percentage };
-
-            series.draw(ctx, strokeOptions);
-            startAngle += sliceAngle;
-          }
-        }
-      }
-    }
-  },
-
-  /**
-   * Draw series data
-   *
-   * @params hitInfo
-   *
-   * @returns {undefined}
-   */
-  drawSunburst(hitInfo) {
-    const ctx = this.bufferCtx;
-    const { width, height } = this.chartRect;
-    const pieDataSet = this.pieDataSet;
-    const pieOption = this.options;
-    const padding = this.options.padding;
-
-    this.calculateAngle();
-
-    let slice;
-    let series;
-
-    const centerX = width / 2;
-    const centerY = height / 2;
-
-    const chartWidth = centerX - (padding.left + padding.right);
-    const chartHeight = centerY - (padding.bottom + padding.top);
-    if ((typeof chartWidth === 'number' && chartWidth < 0)
-      || (typeof chartHeight === 'number' && chartHeight < 0)) {
-      return;
-    }
-
-    const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
-    const outerRadius = Math.min(chartWidth, chartHeight);
-
-    for (let ix = 0; ix < pieDataSet.length; ix++) {
-      const pie = pieDataSet[ix];
-      if (!pie) {
-        return;
-      }
-
-      let radius = outerRadius - (((outerRadius - innerRadius) / pieDataSet.length) * ix);
-      if (pieOption?.pieStroke?.use) {
-        radius -= pieOption.pieStroke.lineWidth;
-      }
-
-      if (radius < 0) {
-        return;
-      }
-
-      pie.or = radius;
-      if (ix < pieDataSet.length - 1) {
-        pie.ir = outerRadius - (((outerRadius - innerRadius) / pieDataSet.length) * (ix + 1));
-      } else {
-        pie.ir = 1;
-      }
-
-      for (let jx = 0; jx < pie.data.length; jx++) {
-        slice = pie.data[jx];
-
-        if (slice.id === 'dummy') {
-          ctx.save();
-          ctx.globalCompositeOperation = 'destination-out';
-          ctx.beginPath();
-          ctx.fillStyle = '#fff';
-          ctx.lineWidth = 2;
-          ctx.strokeStyle = '#fff';
-          ctx.moveTo(centerX, centerY);
-          ctx.arc(centerX, centerY, radius, slice.sa, slice.ea);
-          ctx.stroke();
-          ctx.fill();
-          ctx.closePath();
-          ctx.restore();
-        } else {
-          series = this.seriesList[slice.id];
-
-          if (slice.value) {
-            const strokeOptions = { ...pieOption.pieStroke };
-            if (pie.data.length === 1 && pieOption.pieStroke.use) {
-              strokeOptions.use = false;
-
-              ctx.lineWidth = pieOption.pieStroke.lineWidth;
-              ctx.strokeStyle = pieOption.pieStroke.color;
-              ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-              ctx.stroke();
-            }
-
-            const { selectInfo, legendHitInfo } = hitInfo;
-            series.isSelect = selectInfo?.sId === slice.id;
-            series.isDownplay = (legendHitInfo && legendHitInfo.sId !== slice.id);
-            series.type = 'sunburst';
-            series.centerX = centerX;
-            series.centerY = centerY;
-            series.radius = radius;
-            series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
-            series.startAngle = slice.sa;
-            series.endAngle = slice.ea;
-            series.data = { o: slice.value };
-
-            series.draw(ctx, strokeOptions);
-          }
-        }
-      }
-    }
-  },
-
-  /**
-   * Draw doughnut hole
-   * @param ctx
-   */
-  drawDoughnutHole(ctx = this.bufferCtx) {
-    const pieOption = this.options;
-    const { width, height } = this.chartRect;
-    const padding = this.options.padding;
-
-    const centerX = width / 2;
-    const centerY = height / 2;
-
-    const chartWidth = centerX - (padding.left + padding.right);
-    const chartHeight = centerY - (padding.bottom + padding.top);
-    if ((typeof chartWidth === 'number' && chartWidth < 0)
-      || (typeof chartHeight === 'number' && chartHeight < 0)) {
-      return;
-    }
-
-    const radius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
-
-    ctx.save();
-    ctx.globalCompositeOperation = 'destination-out';
-    ctx.beginPath();
-    ctx.fillStyle = '#fff';
-    ctx.fillOpacity = 0;
-    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-    ctx.fill();
-    ctx.strokeStyle = '#fff';
-    ctx.stroke();
-    ctx.closePath();
-    ctx.restore();
-
-    // inner stroke
-    if (pieOption?.pieStroke?.use) {
-      ctx.beginPath();
-      ctx.strokeStyle = pieOption.pieStroke.color;
-      ctx.lineWidth = pieOption.pieStroke.lineWidth;
-      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-      ctx.stroke();
-      ctx.closePath();
-    }
-
-    this.pieDataSet[this.pieDataSet.length - 1].ir = radius;
-  },
-};
-
-export default modules;
+const modules = {
+  pieDataSet: [],
+  /**
+   * Draw series data
+   *
+   * @params hitInfo
+   *
+   * @returns {undefined}
+   */
+  drawPie(hitInfo) {
+    const ctx = this.bufferCtx;
+    const chartRect = this.chartRect;
+    const pieDataSet = this.pieDataSet;
+    const pieOption = this.options;
+    const padding = this.options.padding;
+    const isDoughnut = !!pieOption.doughnutHoleSize;
+
+    let slice;
+    let value;
+    let sliceAngle;
+    let startAngle = 1.5 * Math.PI;
+    let endAngle;
+    let series;
+    let percentage;
+
+    const centerX = chartRect.width / 2;
+    const centerY = chartRect.height / 2;
+
+    const chartWidth = centerX - (padding.left + padding.right);
+    const chartHeight = centerY - (padding.bottom + padding.top);
+    if ((typeof chartWidth === 'number' && chartWidth < 0)
+      || (typeof chartHeight === 'number' && chartHeight < 0)) {
+      return;
+    }
+
+    const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
+    const outerRadius = Math.min(chartWidth, chartHeight);
+
+    for (let ix = 0; ix < pieDataSet.length; ix++) {
+      const pie = pieDataSet[ix];
+      if (!pie) {
+        return;
+      }
+
+      let radius = outerRadius - (((outerRadius - innerRadius) / pieDataSet.length) * ix);
+      if (pieOption?.pieStroke?.use) {
+        radius -= pieOption.pieStroke.lineWidth;
+      }
+
+      if (radius < 0) {
+        return;
+      }
+
+      pie.or = radius;
+      if (ix < pieDataSet.length - 1) {
+        pie.ir = outerRadius - (((outerRadius - innerRadius) / pieDataSet.length) * (ix + 1));
+      } else {
+        pie.ir = 1;
+      }
+
+      if (pie.total) {
+        for (let jx = 0; jx < pie.data.length; jx++) {
+          slice = pie.data[jx];
+          value = slice.value;
+          percentage = (value / pie.total) * 100;
+          sliceAngle = 2 * Math.PI * (value / pie.total);
+          endAngle = startAngle + sliceAngle;
+
+          slice.sa = startAngle;
+          slice.ea = endAngle;
+          series = this.seriesList[slice.id];
+
+          if (value) {
+            const strokeOptions = { ...pieOption.pieStroke };
+            if (pie.data.length === 1 && pieOption.pieStroke.use) {
+              strokeOptions.use = false;
+
+              ctx.lineWidth = pieOption.pieStroke.lineWidth;
+              ctx.strokeStyle = pieOption.pieStroke.color;
+              ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+              ctx.stroke();
+            }
+
+            const { selectInfo, legendHitInfo } = hitInfo;
+            series.isSelect = selectInfo?.sId === slice.id;
+            series.isDownplay = (legendHitInfo && legendHitInfo.sId !== slice.id);
+            series.type = isDoughnut ? 'doughnut' : 'pie';
+            series.centerX = centerX;
+            series.centerY = centerY;
+            series.radius = radius;
+            series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
+            series.startAngle = startAngle;
+            series.endAngle = endAngle;
+            series.data = { o: value, percentage };
+
+            series.draw(ctx, strokeOptions);
+            startAngle += sliceAngle;
+          }
+        }
+      }
+    }
+  },
+
+  /**
+   * Draw series data
+   *
+   * @params hitInfo
+   *
+   * @returns {undefined}
+   */
+  drawSunburst(hitInfo) {
+    const ctx = this.bufferCtx;
+    const { width, height } = this.chartRect;
+    const pieDataSet = this.pieDataSet;
+    const pieOption = this.options;
+    const padding = this.options.padding;
+
+    this.calculateAngle();
+
+    let slice;
+    let series;
+
+    const centerX = width / 2;
+    const centerY = height / 2;
+
+    const chartWidth = centerX - (padding.left + padding.right);
+    const chartHeight = centerY - (padding.bottom + padding.top);
+    if ((typeof chartWidth === 'number' && chartWidth < 0)
+      || (typeof chartHeight === 'number' && chartHeight < 0)) {
+      return;
+    }
+
+    const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
+    const outerRadius = Math.min(chartWidth, chartHeight);
+
+    for (let ix = 0; ix < pieDataSet.length; ix++) {
+      const pie = pieDataSet[ix];
+      if (!pie) {
+        return;
+      }
+
+      let radius = outerRadius - (((outerRadius - innerRadius) / pieDataSet.length) * ix);
+      if (pieOption?.pieStroke?.use) {
+        radius -= pieOption.pieStroke.lineWidth;
+      }
+
+      if (radius < 0) {
+        return;
+      }
+
+      pie.or = radius;
+      if (ix < pieDataSet.length - 1) {
+        pie.ir = outerRadius - (((outerRadius - innerRadius) / pieDataSet.length) * (ix + 1));
+      } else {
+        pie.ir = 1;
+      }
+
+      for (let jx = 0; jx < pie.data.length; jx++) {
+        slice = pie.data[jx];
+
+        if (slice.id === 'dummy') {
+          ctx.save();
+          ctx.globalCompositeOperation = 'destination-out';
+          ctx.beginPath();
+          ctx.fillStyle = '#fff';
+          ctx.lineWidth = 2;
+          ctx.strokeStyle = '#fff';
+          ctx.moveTo(centerX, centerY);
+          ctx.arc(centerX, centerY, radius, slice.sa, slice.ea);
+          ctx.stroke();
+          ctx.fill();
+          ctx.closePath();
+          ctx.restore();
+        } else {
+          series = this.seriesList[slice.id];
+
+          if (slice.value) {
+            const strokeOptions = { ...pieOption.pieStroke };
+            if (pie.data.length === 1 && pieOption.pieStroke.use) {
+              strokeOptions.use = false;
+
+              ctx.lineWidth = pieOption.pieStroke.lineWidth;
+              ctx.strokeStyle = pieOption.pieStroke.color;
+              ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+              ctx.stroke();
+            }
+
+            const { selectInfo, legendHitInfo } = hitInfo;
+            series.isSelect = selectInfo?.sId === slice.id;
+            series.isDownplay = (legendHitInfo && legendHitInfo.sId !== slice.id);
+            series.type = 'sunburst';
+            series.centerX = centerX;
+            series.centerY = centerY;
+            series.radius = radius;
+            series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
+            series.startAngle = slice.sa;
+            series.endAngle = slice.ea;
+            series.data = { o: slice.value };
+
+            series.draw(ctx, strokeOptions);
+          }
+        }
+      }
+    }
+  },
+
+  /**
+   * Draw doughnut hole
+   * @param ctx
+   */
+  drawDoughnutHole(ctx = this.bufferCtx) {
+    const pieOption = this.options;
+    const { width, height } = this.chartRect;
+    const padding = this.options.padding;
+
+    const centerX = width / 2;
+    const centerY = height / 2;
+
+    const chartWidth = centerX - (padding.left + padding.right);
+    const chartHeight = centerY - (padding.bottom + padding.top);
+    if ((typeof chartWidth === 'number' && chartWidth < 0)
+      || (typeof chartHeight === 'number' && chartHeight < 0)) {
+      return;
+    }
+
+    const radius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.beginPath();
+    ctx.fillStyle = '#fff';
+    ctx.fillOpacity = 0;
+    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.strokeStyle = '#fff';
+    ctx.stroke();
+    ctx.closePath();
+    ctx.restore();
+
+    // inner stroke
+    if (pieOption?.pieStroke?.use) {
+      ctx.beginPath();
+      ctx.strokeStyle = pieOption.pieStroke.color;
+      ctx.lineWidth = pieOption.pieStroke.lineWidth;
+      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.closePath();
+    }
+
+    this.pieDataSet[this.pieDataSet.length - 1].ir = radius;
+  },
+};
+
+export default modules;

package/src/components/chart/plugins/plugins.title.js

@@ -1,56 +1,56 @@
-const modules = {
-  /**
-   * Create title DOM
-   *
-   * @returns {undefined}
-   */
-  createTitle() {
-    this.titleDOM = document.createElement('div');
-    this.titleDOM.className = 'ev-chart-title';
-    this.wrapperDOM.appendChild(this.titleDOM);
-  },
-
-  /**
-   * Initialize title DOM
-   *
-   * @returns {undefined}
-   */
-  initTitle() {
-    if (!this.isInitTitle) {
-      this.createTitle();
-    }
-
-    const opt = this.options.title;
-    Object.keys(opt.style).forEach((key) => {
-      this.titleDOM.style[key] = opt.style[key];
-    });
-
-    this.titleDOM.textContent = opt.text;
-    this.titleDOM.style.height = `${opt.height}px`;
-    this.titleDOM.style.lineHeight = `${opt.height}px`;
-
-    this.isInitTitle = true;
-  },
-
-  /**
-   * show title DOM with manipulating css
-   *
-   * @returns {undefined}
-   */
-  showTitle() {
-    this.titleDOM.style.display = 'block';
-    this.wrapperDOM.style.paddingTop = `${this.options.title.height}px`;
-  },
-
-  /**
-   * hide title DOM with manipulating css
-   *
-   * @returns {undefined}
-   */
-  hideTitle() {
-    this.titleDOM.style.display = 'none';
-    this.wrapperDOM.style.paddingTop = '0px';
-  },
-};
-
-export default modules;
+const modules = {
+  /**
+   * Create title DOM
+   *
+   * @returns {undefined}
+   */
+  createTitle() {
+    this.titleDOM = document.createElement('div');
+    this.titleDOM.className = 'ev-chart-title';
+    this.wrapperDOM.appendChild(this.titleDOM);
+  },
+
+  /**
+   * Initialize title DOM
+   *
+   * @returns {undefined}
+   */
+  initTitle() {
+    if (!this.isInitTitle) {
+      this.createTitle();
+    }
+
+    const opt = this.options.title;
+    Object.keys(opt.style).forEach((key) => {
+      this.titleDOM.style[key] = opt.style[key];
+    });
+
+    this.titleDOM.textContent = opt.text;
+    this.titleDOM.style.height = `${opt.height}px`;
+    this.titleDOM.style.lineHeight = `${opt.height}px`;
+
+    this.isInitTitle = true;
+  },
+
+  /**
+   * show title DOM with manipulating css
+   *
+   * @returns {undefined}
+   */
+  showTitle() {
+    this.titleDOM.style.display = 'block';
+    this.wrapperDOM.style.paddingTop = `${this.options.title.height}px`;
+  },
+
+  /**
+   * hide title DOM with manipulating css
+   *
+   * @returns {undefined}
+   */
+  hideTitle() {
+    this.titleDOM.style.display = 'none';
+    this.wrapperDOM.style.paddingTop = '0px';
+  },
+};
+
+export default modules;