/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as M } from "../../chunks/runtime.js";
import { u as k } from "../../chunks/useT9n.js";
import { substitute as E } from "@arcgis/core/intl.js";
import { LitElement as I, nothing as h, safeStyleMap as v, safeClassMap as O } from "@arcgis/lumina";
import { css as R, html as y, svg as f } from "lit";
import { g as z } from "../../chunks/locale.js";
const F = R`:host{display:block;--arcgis-histogram-bar-color: var(--calcite-color-border-1);--arcgis-histogram-stop-color: color-mix(in srgb, var(--calcite-color-brand) 80%, transparent)}.content{display:block;direction:ltr}.svg{display:block;width:100%;height:100%}.data-line{stroke:#888;stroke-width:1px;shape-rendering:crispEdges}.average-data-line{stroke-width:1px;shape-rendering:crispEdges;stroke:#444}.label,.data-line-symbol{font-size:12px;stroke:#fff;stroke-width:2px;paint-order:stroke;unicode-bidi:plaintext}.data-line-symbol{font-family:"Georgia, serif",sans-serif;font-style:italic}`;
function S(t, r, n, e, i) {
  const [s, a] = i;
  if (!t || a === 0 || s === 0 || n == null || r == null)
    return null;
  const o = n - r, c = (t.length > 1 ? t[t.length - 1].maxValue - t[0].minValue : 0) / o, [u, g] = e === "vertical" ? [a * c, s] : [a, s * c], b = t ? t.map((m) => m.count) : [], d = Math.max(...b);
  return t.map((m) => {
    const [p, $] = e === "vertical" ? [u / t.length, d !== 0 ? m.count / d * g : 0] : [d !== 0 ? m.count / d * u : 0, g / t.length], { maxValue: D } = m, x = n - D, [_, C] = e === "vertical" ? [0, x * (a / o)] : [s - $ - x * (s / o), a - p];
    return [_, C, $, p];
  });
}
function B(t, r, n, e, i) {
  const s = [];
  return t != null && s.push({
    value: t,
    symbol: "x̄",
    lineClass: "average-data-line"
  }), r != null && n != null && e != null && s.push(...G(n, e, r, t)), i && s.push(...i), s;
}
function N(t, r, n, e, i) {
  if (n == null)
    return [0, 0, 0, 0];
  const s = Math.round((i - n) / e * 100) / 100, [a, o] = t;
  if (r === "vertical") {
    let c = o - s * o || 1;
    return c = Math.round(c) + 0.5, [0, "100%", c, c];
  }
  let l = s * a || 1;
  return l = Math.round(l) + 0.5, [l, l, "100%", 0];
}
function P(t, r, n, e, i) {
  if (n == null)
    return [0, 0];
  const s = Math.round((i - n) / e * 100) / 100, [a, o] = t;
  return r === "vertical" ? [a, o - s * o] : [0, s * a];
}
function T(t, r, n) {
  if (!t || t.length === 0)
    return null;
  if (L(t)) {
    const e = t.map((i) => ({
      ...i,
      color: w(i.color ?? n)
    }));
    return e.unshift({
      color: r,
      minValue: Number.NEGATIVE_INFINITY,
      maxValue: e[0].minValue
    }), e.push({
      color: r,
      minValue: e[e.length - 1].maxValue,
      maxValue: Number.POSITIVE_INFINITY
    }), e;
  } else
    return t.map((e) => ({
      ...e,
      color: w(e.color ?? n)
    }));
}
function A(t, r, n, e) {
  if (!t || t.length === 0)
    return n;
  if (L(t)) {
    const i = H(t, r);
    if (i.length === 0)
      return n;
    if (e) {
      const { color: s = n, weight: a } = i[0], { color: o = n, weight: l } = i[1] ?? i[0], c = a + l;
      return `color-mix(in srgb, ${s} ${a / c * 100}%, ${o} ${l / c * 100}%)`;
    }
    return i[0].color ?? n;
  }
  return W(t, r);
}
function H(t, r) {
  const n = [];
  for (const e of t) {
    const i = Math.max(0, Math.min(r.maxValue, e.maxValue) - Math.max(r.minValue, e.minValue));
    i > 0 && n.push({ color: e.color, weight: i });
  }
  return n.sort((e, i) => i.weight - e.weight);
}
function W(t, r) {
  const n = (r.maxValue - r.minValue) / 2 + r.minValue;
  if (n > t[t.length - 1].value)
    return t[t.length - 1].color;
  for (let e = 0; e < t.length - 1; e++) {
    const i = t[e], s = t[e + 1];
    if (n <= i.value)
      return i.color;
    if (n < s.value) {
      const a = (n - i.value) / (s.value - i.value) * 100;
      return `color-mix(in srgb, ${i.color}, ${s.color} ${a}%)`;
    }
  }
  return t[t.length - 1].color;
}
function L(t) {
  return t[0] != null && "minValue" in t[0];
}
function w(t) {
  if (typeof t == "string")
    return t;
  if (Array.isArray(t))
    return `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${t[3] ?? 1})`;
  const { r, g: n, b: e, a: i = 1 } = t;
  return `rgba(${r}, ${n}, ${e}, ${i})`;
}
function G(t, r, n, e) {
  const i = 0.06 * (r - t);
  return Y(n, e).filter((s) => Math.abs(e - s) > i).map((s, a, o) => {
    const l = o.length / 2, c = s > e ? "+" : "-", u = a >= l ? a - l + 1 : l - a;
    return {
      symbol: `${c}${u === 1 ? "" : u}σ`,
      value: s
    };
  });
}
function Y(t, r) {
  if (r == null || t == null)
    return [];
  const n = 1, e = [];
  for (let i = n * -1; i <= n; i++)
    i !== 0 && e.push(r + i * t);
  return e;
}
const V = "var(--arcgis-histogram-bar-color)", U = "var(--arcgis-histogram-stop-color)";
class j extends I {
  constructor() {
    super(...arguments), this._messages = k(), this._normalizedStops = null, this._formatLabel = (r) => z(this._messages._lang, this._numberFormatterOptions).format(r), this._numberFormatterOptions = {
      maximumFractionDigits: 2
    }, this.containerDimensions = [0, 0], this.icon = "graph-histogram", this.layout = "horizontal", this.colorBlendingEnabled = !1;
  }
  static {
    this.properties = { containerDimensions: 16, colorStops: 0, icon: 3, average: 11, messageOverrides: 0, standardDeviation: 11, bins: 0, dataLines: 0, label: 1, layout: 3, max: 11, min: 11, colorBlendingEnabled: 5 };
  }
  static {
    this.styles = F;
  }
  loaded() {
    const r = new ResizeObserver((i) => {
      for (const s of i) {
        const { width: a, height: o } = s.contentRect;
        this.containerDimensions = [a, o];
      }
    }), { width: n, height: e } = this.el.getBoundingClientRect();
    this.containerDimensions = [n, e], r.observe(this.el);
  }
  willUpdate(r) {
    r.has("colorStops") && (this._normalizedStops = T(this.colorStops, V, U));
  }
  render() {
    const { label: r } = this;
    return y`<div role=img .ariaLabel=${r ?? void 0} class="content">${this._renderContent()}</div>`;
  }
  _renderContent() {
    const { containerDimensions: [r, n] } = this, e = "bg-fill";
    return r ? y`<svg class="svg" xmlns=http://www.w3.org/2000/svg>${f`<defs><clipPath id=${e}><rect height=${n ?? h} width=${r ?? h} x=0 y=0 /></clipPath></defs><g style=${v({ clipPath: `url(#${e})` })}><g>${this._renderBars()}</g></g><g>${this._renderLines()}</g>`}</svg>` : null;
  }
  _renderBars() {
    const { bins: r, _messages: n } = this, e = S(this.bins, this.min, this.max, this.layout, this.containerDimensions);
    return !e || !r ? null : e.map((i, s) => {
      const [a, o, l, c] = i, u = r[s], g = n?.barLabel ? E(n.barLabel, u) : "";
      return f`<rect style=${v({
        fill: A(this._normalizedStops, u, V, this.colorBlendingEnabled)
      })} .ariaLabel=${g} data-index=${s ?? h} height=${c ?? h} role=img shape-rendering=crispEdges stroke-width=0 width=${l ?? h} x=${a ?? h} y=${o ?? h} />`;
    });
  }
  _renderLines() {
    return B(this.average, this.standardDeviation, this.min, this.max, this.dataLines)?.map((n) => q({ dataLine: n, containerDimensions: this.containerDimensions, layout: this.layout, min: this.min, max: this.max, labelFormatter: this._formatLabel }));
  }
}
const q = (t) => {
  const { containerDimensions: r, layout: n, min: e, max: i, dataLine: s, labelFormatter: a } = t, o = i != null && e != null ? i - e : 0, [l, c, u, g] = N(r, n, e, o, s.value), [b, d] = P(r, n, e, o, s.value), m = "symbol" in s ? [f`<tspan class="data-line-symbol">${s.symbol}</tspan>`, f`<tspan>${a(s.value)}</tspan>`] : s.label, p = "lineClass" in s && s.lineClass ? s.lineClass : "data-line";
  return f`<g><title>${s.value}</title><line class=${O(p)} shape-rendering=crispEdges x1=${l ?? h} x2=${c ?? h} y1=${u ?? h} y2=${g ?? h} /><text class="label" text-anchor=end transform=${(n === "horizontal" ? "rotate(270)" : void 0) ?? h} x=${b ?? h} y=${d - 2}>${m}</text></g>`;
};
M("arcgis-histogram", j);
export {
  j as ArcgisHistogram
};
