evui 3.5.0-rc.1 → 3.5.0

package/dist/components/chart/scale/scale.js

@@ -0,0 +1,492 @@
+import { defaultsDeep as E } from "lodash-es";
+import F from "../helpers/helpers.canvas.js";
+import { truthyNumber as nt } from "../../../common/utils.js";
+import { AXIS_OPTION as at, AXIS_UNITS as ht, PLOT_BAND_OPTION as rt, PLOT_LINE_OPTION as ct, PLOT_LINE_LABEL_OPTION as xt } from "../helpers/helpers.constant.js";
+import f from "../helpers/helpers.util.js";
+class mt {
+  constructor(e, l, i, n) {
+    const a = E({}, l, at);
+    Object.keys(a).forEach((s) => {
+      this[s] = a[s];
+    }), this.type = e, this.ctx = i, this.units = ht[this.type], this.options = n, this.position || (this.position = e === "x" ? "bottom" : "left");
+  }
+  /**
+   * Calculate axis's min/max label steps
+   * @param {string} type           axis direction ('x', 'y')
+   * @param {object} chartRect      chart size information
+   * @param {object} labelOffset    chart label offset information
+   * @param {number} tickSize       label's size
+   *
+   * @returns {object} label range
+   */
+  calculateLabelRange(e, l, i, n) {
+    let a, s, t;
+    e === "x" ? (a = l.chartWidth, t = Math.floor(n * 1.1), s = [i.left, i.right]) : (a = l.chartHeight, s = [i.top, i.bottom], t = n + Math.floor(a * 0.1));
+    const o = a - (s[0] + s[1]), h = 1, r = Math.max(Math.floor(o / t) - 1, 1);
+    return {
+      min: h,
+      max: r
+    };
+  }
+  /**
+   * Calculate min/max value, label and size information for axis
+   * @param {object} minMax    min/max information
+   * @param {object} scrollbarOpt scrollbar option
+   *
+   * @returns {object} min/max value and label
+   */
+  calculateScaleRange(e, l) {
+    var h;
+    let i, n, a = !1;
+    const s = l != null && l.use ? l == null ? void 0 : l.range : this.range;
+    Array.isArray(s) && (s == null ? void 0 : s.length) === 2 ? this.options.type === "heatMap" ? (i = s[1] > +e.max ? +e.max : s[1], n = s[0] < +e.min ? +e.min : s[0]) : (i = s[1], n = s[0]) : typeof s == "function" ? [n, i] = s(e.min, e.max) : (i = e.max, n = e.min), this.autoScaleRatio && (i = Math.ceil(i * (this.autoScaleRatio + 1))), this.startToZero && (n = 0), i === n && (i += 1, a = !0);
+    const t = this.getLabelFormat(n), o = this.getLabelFormat(i, {
+      isMaxValueSameAsMin: a
+    });
+    return {
+      min: n,
+      max: i,
+      minLabel: t,
+      maxLabel: o,
+      size: f.calcTextSizeCanvas(
+        o,
+        f.getLabelStyle(this.labelStyle),
+        (h = this.labelStyle) == null ? void 0 : h.padding
+      )
+    };
+  }
+  /**
+   * return width what has max length
+   * @param {string[]} notFormattedLabels
+   * @param {object} chartRect - unused in base class, used in StepScale override
+   * @reutrn number maxWidth
+   */
+  // eslint-disable-next-line no-unused-vars
+  getLabelWidthHasMaxLength(e, l) {
+    return (e ?? []).reduce((i, n) => {
+      var t;
+      const a = this.getLabelFormat(n), s = ((t = f.calcTextSizeCanvas(a, f.getLabelStyle(this.labelStyle))) == null ? void 0 : t.width) ?? 0;
+      return Math.max(i, s);
+    }, 0);
+  }
+  /**
+   * With range information, calculate how many labels in axis
+   * linear type은 scale.linear.js에서 처리
+   * @param {object} range    min/max information
+   *
+   * @returns {object} steps, interval, min/max graph value
+   */
+  calculateSteps(e) {
+    const { maxValue: l, minValue: i } = e;
+    let { maxSteps: n } = e, a = this.getInterval(e), s = i, t;
+    for (; s < l; )
+      s += a;
+    const o = s, h = i, r = o - h;
+    if (t = Math.round(r / a), l === 1 && (this.decimalPoint ? n > 2 ? (a = 0.2, t = 5, n = 5) : (a = 0.5, t = 2, n = 2) : (a = 1, t = 1, n = 1)), this.fixedSteps)
+      return {
+        steps: t,
+        interval: a,
+        graphMin: h,
+        graphMax: o
+      };
+    for (; t > n; )
+      a *= 2, t = Math.round(r / a), a = Math.ceil(r / t);
+    return o - h > t * a && (a = Math.ceil((o - h) / t)), {
+      steps: t,
+      interval: a,
+      graphMin: h,
+      graphMax: o
+    };
+  }
+  /**
+   * Draw Axis Title
+   *
+   * @param {object} chartRect      min/max information
+   * @param {object} labelOffset    label offset information
+   *
+   * @returns {undefined}
+   */
+  drawAxisTitle(e, l) {
+    const i = this.title;
+    if (!(i != null && i.use) || isNaN(i.fontSize))
+      return;
+    const n = this.ctx;
+    n.save(), n.font = f.getLabelStyle(i), n.fillStyle = i.color, n.textAlign = i.textAlign;
+    const a = {
+      xLeft: e.x1 + l.left,
+      xRight: e.x2 - l.right,
+      yTop: e.y1
+    };
+    let s, t;
+    const o = 10;
+    this.type === "x" ? (s = a.xRight, t = e.y2 + i.fontSize + o) : (t = a.yTop - i.fontSize - o, s = a.xLeft), s > 0 && t > 0 && n.fillText(i.text, s, t), n.restore();
+  }
+  /**
+   * Draw axis
+   * @param {object} chartRect      min/max information
+   * @param {object} labelOffset    label offset information
+   * @param {object} stepInfo       label steps information
+   * @param {object} hitInfo        hit information
+   * @param {object} selectLabelInfo selected label information
+   * @param {object} dataLabels     data label information, x axis only
+   *
+   * @returns {undefined}
+   */
+  draw(e, l, i, n, a, s) {
+    var O, V, Y, G, U, Z, j, K, q, J, Q, $, I, R, D, tt, et, it, lt, st;
+    const t = this.ctx, o = this.options, h = {
+      x1: e.x1 + l.left,
+      x2: e.x2 - l.right,
+      y1: e.y1 + l.top,
+      y2: e.y2 - l.bottom
+    }, r = i.steps, c = i.graphMin, g = i.graphMax, w = i.interval, y = h[this.units.rectStart], d = h[this.units.rectEnd], u = h[this.units.rectOffset(this.position)], M = h[this.units.rectOffsetCounter(this.position)], A = 5;
+    let m;
+    if (this.drawAxisTitle(e, l), t.font = f.getLabelStyle(this.labelStyle), t.fillStyle = this.labelStyle.color, this.type === "x" ? (t.textAlign = "center", t.textBaseline = this.position === "top" ? "bottom" : "top") : (t.textAlign = this.position === "left" ? "right" : "left", t.textBaseline = "middle"), this.showAxis && (t.lineWidth = this.axisLineWidth, m = f.aliasPixel(t.lineWidth), t.beginPath(), t.strokeStyle = this.axisLineColor, this.type === "x" ? (t.moveTo(y, u + m), t.lineTo(d, u + m)) : (t.moveTo(u + m, y), t.lineTo(u + m, d)), t.stroke(), t.closePath()), !(r === 0 || c === null)) {
+      if ((O = this.labelStyle) != null && O.show) {
+        const N = d - y, X = N / r, C = [], k = i.interval;
+        let S = null, b = null, v = y, z = c;
+        if (this.type === "x" && (o != null && o.axesX[0].flow) && s.length !== r + 1) {
+          const x = Math.floor(c / k) * k;
+          x !== +c && (z = x + k, v += N / (g - c) * (z - c));
+        }
+        t.strokeStyle = this.gridLineColor, t.lineWidth = 1, m = f.aliasPixel(t.lineWidth);
+        let P;
+        for (let x = 0; x <= r; x++)
+          if (S = Math.round(v + X * x), S <= d || this.type !== "x" || !(o != null && o.axesX[0].flow) || s.length === r + 1) {
+            t.beginPath(), C[x] = z + x * w, C[x] === 0 && this.zeroLineColor ? t.strokeStyle = this.zeroLineColor : t.strokeStyle = this.gridLineColor, b = S + m, P = this.getLabelFormat(Math.min(g, C[x]), {
+              prev: C[x - 1] ?? ""
+            });
+            const L = ((Y = (V = this.options) == null ? void 0 : V.selectLabel) == null ? void 0 : Y.use) && ((U = (G = this.options) == null ? void 0 : G.selectLabel) == null ? void 0 : U.useLabelOpacity) && this.options.horizontal === (this.type === "y") && ((Z = a == null ? void 0 : a.dataIndex) == null ? void 0 : Z.length) && !(a != null && a.label.map(
+              (p) => this.getLabelFormat(Math.min(g, p), {
+                prev: C[x - 1] ?? ""
+              })
+            ).includes(P));
+            let W;
+            x === r && this.lastLabelFontStyle ? (t.font = f.getLabelStyle(this.lastLabelFontStyle), W = this.lastLabelFontStyle.color) : (t.font = f.getLabelStyle(this.labelStyle), W = this.labelStyle.color);
+            let B = 1;
+            f.getColorStringType(W) === "RGBA" && (B = f.getOpacity(W)), t.fillStyle = f.colorStringToRgba(
+              W,
+              L ? (j = this.options) == null ? void 0 : j.unSelectedOpacity : B
+            );
+            let T;
+            if (this.type === "x") {
+              if (T = this.position === "top" ? u - 10 : u + 10, ((K = o == null ? void 0 : o.brush) != null && K.showLabel || !(o != null && o.brush)) && t.fillText(this.checkFixWidth(P), S, T), !L && ((q = o == null ? void 0 : o.selectItem) != null && q.showLabelTip) && (n != null && n.label) && !((J = this.options) != null && J.horizontal)) {
+                const p = this.getLabelFormat(
+                  Math.min(g, n.label + 0 * w)
+                );
+                if (p === P) {
+                  const _ = Math.round(t.measureText((Q = this.labelStyle) == null ? void 0 : Q.fontSize).width);
+                  f.showLabelTip({
+                    ctx: this.ctx,
+                    width: Math.round(t.measureText(p).width) + 10,
+                    height: _,
+                    x: S,
+                    y: T + (_ - 2),
+                    borderRadius: 2,
+                    arrowSize: 3,
+                    text: P,
+                    backgroundColor: (I = ($ = o == null ? void 0 : o.selectItem) == null ? void 0 : $.labelTipStyle) == null ? void 0 : I.backgroundColor,
+                    textColor: (D = (R = o == null ? void 0 : o.selectItem) == null ? void 0 : R.labelTipStyle) == null ? void 0 : D.textColor
+                  });
+                }
+              }
+              this.showAxisTick && (t.beginPath(), t.strokeStyle = this.axisLineColor, t.moveTo(b, u), t.lineTo(b, u + A), t.stroke(), t.closePath()), (x !== 0 || o != null && o.axesX[0].flow) && this.showGrid && (t.beginPath(), t.strokeStyle = this.gridLineColor, t.moveTo(b, u), t.lineTo(b, M), t.stroke(), t.closePath());
+            } else
+              T = this.position === "left" ? u - 10 : u + 10, ((tt = o == null ? void 0 : o.brush) != null && tt.showLabel || !(o != null && o.brush)) && t.fillText(this.checkFixWidth(P), T, S), x === r && (b -= 1), this.showAxisTick && (t.beginPath(), t.strokeStyle = this.axisLineColor, t.moveTo(u + (this.axisLineWidth ?? 1), b), t.lineTo(u - A, b), t.stroke(), t.closePath()), x !== 0 && this.showGrid && (t.beginPath(), t.strokeStyle = this.gridLineColor, t.moveTo(u, b), t.lineTo(M, b), t.stroke(), t.closePath());
+          }
+      }
+      if ((et = this.plotBands) != null && et.length || (it = this.plotLines) != null && it.length) {
+        const N = e.chartWidth - (l.left + l.right), X = e.chartHeight - (l.top + l.bottom), C = m + 1, k = h.x1, S = h.x2 + C, b = h.y1 - C, v = h.y2;
+        (lt = this.plotBands) == null || lt.forEach((z) => {
+          const P = E({}, z, rt), { from: x, to: H, label: L } = P, W = f.isNullOrUndefined(x) ? c : Math.max(x, c), B = f.isNullOrUndefined(H) ? g : Math.min(H, g);
+          this.setPlotBandStyle(P);
+          let T, p;
+          if (this.type === "x") {
+            if (T = F.calculateX(W, c, g, N, k), p = F.calculateX(B, c, g, N, k), T === null || p === null)
+              return;
+            this.drawXPlotBand(T, p, k, S, b, v);
+          } else {
+            if (T = F.calculateY(W, c, g, X, v), p = F.calculateY(B, c, g, X, v), T === null || p === null)
+              return;
+            this.drawYPlotBand(T, p, k, S, b, v);
+          }
+          if (L.show) {
+            const _ = this.getNormalizedLabelOptions(e, L), ot = this.getPlotBandLabelPosition(T, p, _, S, b);
+            this.drawPlotLabel(_, ot);
+          }
+          t.restore();
+        }), (st = this.plotLines) == null || st.forEach((z) => {
+          if (typeof +z.value != "number")
+            return;
+          const P = E({}, z, ct), { value: x, label: H } = P;
+          let L;
+          if (this.type === "x") {
+            if (L = F.calculateX(x, c, g, N, k), L === null)
+              return;
+            this.setPlotLineStyle(P), this.drawXPlotLine(L, k, S, b, v);
+          } else {
+            if (L = F.calculateY(x, c, g, X, v), L === null)
+              return;
+            this.setPlotLineStyle(P), this.drawYPlotLine(L, k, S, b, v);
+          }
+          if (H.show) {
+            const W = this.getNormalizedLabelOptions(e, H), B = this.getPlotLineLabelPosition(L, W, S, b);
+            this.drawPlotLabel(W, B);
+          }
+          t.restore();
+        });
+      }
+    }
+  }
+  /**
+   * Set plot line style
+   * @param {object} plotLine      plotLine Options
+   *
+   * @returns {undefined}
+   */
+  setPlotLineStyle(e) {
+    const l = this.ctx, { color: i, lineWidth: n } = e;
+    l.beginPath(), l.save(), l.lineWidth = n, l.strokeStyle = i, e.segments && l.setLineDash(e.segments);
+  }
+  /**
+   * Set plot band style
+   * @param {object} plotBand      plotBand Options
+   *
+   * @returns {undefined}
+   */
+  setPlotBandStyle(e) {
+    const l = this.ctx, { color: i } = e;
+    l.beginPath(), l.save(), l.fillStyle = i;
+  }
+  /**
+   * Draw X Plot band
+   * @param {number} fromDataX     From data's X Position
+   * @param {number} toDataX       To data's X Position
+   * @param {number} minX          Min X Position
+   * @param {number} maxX          Max X Position
+   * @param {number} minY          Min Y Position
+   * @param {number} maxY          Max Y Position
+   *
+   * @returns {undefined}
+   */
+  drawXPlotBand(e, l, i, n, a, s) {
+    const t = this.ctx, o = (h) => h || h > i || h < n;
+    if (!o(e) || !o(l)) {
+      t.closePath(), t.restore();
+      return;
+    }
+    t.moveTo(e, a), t.lineTo(e, s), t.lineTo(l, s), t.lineTo(l, a), t.lineTo(e, a), t.stroke(), t.fill(), t.restore(), t.closePath();
+  }
+  /**
+   * Draw X Plot line
+   * @param {number} dataX         Data's X Position
+   * @param {number} minX          Min X Position
+   * @param {number} maxX          Max X Position
+   * @param {number} minY          Min Y Position
+   * @param {number} maxY          Max Y Position
+   *
+   * @returns {undefined}
+   */
+  drawXPlotLine(e, l, i, n, a) {
+    const s = this.ctx;
+    if (!e || e < l || e > i) {
+      s.closePath(), s.restore();
+      return;
+    }
+    let t = e;
+    t += f.aliasPixel(s.lineWidth), s.moveTo(t, a), s.lineTo(t, n), s.stroke(), s.restore(), s.closePath();
+  }
+  /**
+   * Draw Y Plot line
+   * @param {number} dataY         Data's Y Position
+   * @param {number} minX          Min X Position
+   * @param {number} maxX          Max X Position
+   * @param {number} minY          Min Y Position
+   * @param {number} maxY          Max Y Position
+   *
+   * @returns {undefined}
+   */
+  drawYPlotLine(e, l, i, n, a) {
+    const s = this.ctx;
+    if (!e || e > a || e < n) {
+      s.closePath(), s.restore();
+      return;
+    }
+    let t = e;
+    t += f.aliasPixel(s.lineWidth), s.moveTo(l, t), s.lineTo(i, t), s.stroke(), s.restore(), s.closePath();
+  }
+  /**
+   * Draw Y Plot band
+   * @param {number} fromDataY     From data's Y Position (bottom)
+   * @param {number} toDataY       To data's Y Position (top)
+   * @param {number} minX          Min X Position
+   * @param {number} maxX          Max X Position
+   * @param {number} minY          Min Y Position
+   * @param {number} maxY          Max Y Position
+   *
+   * @returns {undefined}
+   */
+  drawYPlotBand(e, l, i, n, a, s) {
+    const t = this.ctx, o = (h) => h || h > a || h < s;
+    if (!o(e) || !o(l)) {
+      t.closePath(), t.restore();
+      return;
+    }
+    t.moveTo(i, e), t.lineTo(i, l), t.lineTo(n, l), t.lineTo(n, e), t.lineTo(i, e), t.fill(), t.restore(), t.closePath();
+  }
+  /**
+   * get normalized options for plot label
+   * @param {object} chartRect     chartRect
+   * @param {object} labelOpt      plotLine Options
+   *
+   * @returns {object}
+   */
+  getNormalizedLabelOptions(e, l) {
+    const i = E({}, l, xt), n = this.ctx, { maxWidth: a } = i, s = i.fontSize > 20 ? 20 : i.fontSize;
+    let t = i.text, o = a ?? n.measureText(t).width;
+    const h = this.type === "y" ? e.width - e.chartWidth : a ?? e.width;
+    return h < n.measureText(t).width && i.textOverflow === "ellipsis" && (t = f.truncateLabelWithEllipsis(i.text, h, n), o = n.measureText(t).width), {
+      label: t,
+      fontSize: s,
+      labelWidth: o,
+      labelBoxPadding: s / 4,
+      labelHalfWidth: o / 2,
+      labelHalfHeight: s / 2,
+      ...i
+    };
+  }
+  /**
+   * Calculate position of plot band's label
+   * @param {object} fromPos       from data position
+   * @param {object} toPos         to data position
+   * @param {object} labelOpt      label options
+   * @param {object} maxX          max x position
+   * @param {object} minY          min y position
+   *
+   * @returns {object}
+   */
+  getPlotBandLabelPosition(e, l, i, n, a) {
+    const {
+      fontSize: s,
+      labelWidth: t,
+      labelHalfWidth: o,
+      labelHalfHeight: h,
+      labelBoxPadding: r,
+      textAlign: c,
+      verticalAlign: g
+    } = i;
+    if (s <= 0)
+      return { textX: 0, textY: 0 };
+    let w, y;
+    if (this.type === "x")
+      switch (y = a - r - s, c) {
+        case "left":
+          w = e + o + r;
+          break;
+        case "right":
+          w = l - o - r;
+          break;
+        case "center":
+        default:
+          w = (l - e) / 2 + e;
+          break;
+      }
+    else
+      switch (w = n + t + r, g) {
+        case "top":
+          y = l + h + r;
+          break;
+        case "bottom":
+          y = e - h - r;
+          break;
+        case "middle":
+        default:
+          y = (e - l) / 2 + l;
+          break;
+      }
+    return { textX: w, textY: y };
+  }
+  /**
+   * Calculate position of plot line's label
+   * @param {object} dataPos       data position
+   * @param {object} labelOpt      label options
+   * @param {object} maxX          max x position
+   * @param {object} minY          min y position
+   *
+   * @returns {undefined}
+   */
+  getPlotLineLabelPosition(e, l, i, n) {
+    const { fontSize: a, labelWidth: s, labelHalfWidth: t, labelHalfHeight: o, labelBoxPadding: h } = l;
+    if (a <= 0)
+      return { textX: 0, textY: 0 };
+    let r, c;
+    if (this.type === "x")
+      switch (c = n - h - a, l.textAlign) {
+        case "left":
+          r = e - t - h;
+          break;
+        case "right":
+          r = e + t + h;
+          break;
+        case "center":
+        default:
+          r = e;
+          break;
+      }
+    else
+      switch (r = i + s + h, l.verticalAlign) {
+        case "top":
+          c = e - o - h;
+          break;
+        case "bottom":
+          c = e + o + h;
+          break;
+        case "middle":
+        default:
+          c = e;
+          break;
+      }
+    return { textX: r, textY: c };
+  }
+  /**
+   * Calculate Values for drawing label
+   * @param {object} labelOptions  plot line Label Options
+   * @param {object} positions     x, y Position
+   *
+   * @returns {undefined}
+   */
+  drawPlotLabel(e, l) {
+    if (!l)
+      return;
+    const { textX: i, textY: n } = l, {
+      label: a,
+      fontSize: s,
+      fontColor: t,
+      fillColor: o,
+      lineColor: h,
+      lineWidth: r,
+      labelBoxPadding: c,
+      labelWidth: g,
+      labelHalfWidth: w,
+      labelHalfHeight: y
+    } = e;
+    if (s <= 0)
+      return;
+    const d = this.ctx;
+    d.save(), d.beginPath(), d.font = f.getLabelStyle(e);
+    let u = 0, M = 0, A = 0, m = 0;
+    this.type === "x" ? (u = n - c, M = n + s, A = i - w - c, m = i + w + c) : (u = n - y - c, M = n + y + c, A = i - g, m = i + c), d.fillStyle = o, d.strokeStyle = h, d.lineWidth = r, d.moveTo(A, M), d.lineTo(A, u), d.lineTo(m, u), d.lineTo(m, M), d.lineTo(A, M), d.fill(), r > 0 && d.stroke(), d.fillStyle = t, d.fillText(a, i, n), d.closePath();
+  }
+  /**
+   * Check if the label width is greater than the fix width
+   * @param {string} value label value
+   * @returns
+   */
+  checkFixWidth(e) {
+    const { fixWidth: l, fitDir: i } = this.labelStyle;
+    return nt(l) && l > 0 ? f.truncateLabelWithEllipsis(e, l, this.ctx, i) : e;
+  }
+}
+export {
+  mt as default
+};