@pacem/pacem-charts 1.0.0-abel

package/dist/bundle/pacem-charts.mjs

@@ -0,0 +1,1462 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// packages/charts/dist/esm/index-components.js
+var index_components_exports = {};
+__export(index_components_exports, {
+  Charts: () => index_components_charts_exports
+});
+
+// packages/charts/dist/esm/index-components-charts.js
+var index_components_charts_exports = {};
+__export(index_components_charts_exports, {
+  ChartEvent: () => ChartEvent,
+  MANAGED_EVENTS: () => MANAGED_EVENTS,
+  PacemChartElement: () => PacemChartElement,
+  PacemChartSeriesElement: () => PacemChartSeriesElement,
+  PacemColumnChartElement: () => PacemColumnChartElement,
+  PacemPieChartElement: () => PacemPieChartElement,
+  PacemPieSliceElement: () => PacemPieSliceElement,
+  PacemSeriesChartElement: () => PacemSeriesChartElement
+});
+
+// packages/charts/dist/esm/types.js
+import { CustomElement, Watch, PropertyConverters, P, PCSS, Components, CustomUIEvent, CustomElementUtils, Utils, Throttle, PropertyChangeEventName } from "@pacem/pacem-core";
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var MANAGED_EVENTS = ["keydown", "keyup", "click", "dblclick", "mouseover", "mouseout", "mouseenter", "mouseleave", "mousedown", "mouseup", "mousemove", "contextmenu"];
+var MSECS_PER_DAY = 1e3 * 60 * 60 * 24;
+var MAX_X_LABELS = 10;
+var MAX_Y_LABELS = 10;
+var SERIES_DATAITEM = "pacem:chart-series:dataitem";
+var SERIES_SERIES = "pacem:chart-series:series";
+function getEvenlySpaced(items, type, min, max, formatOrLang, labels = MAX_X_LABELS) {
+  const length = type === "number" || type === "date" ? max - min : Math.max(1, items.length - 1);
+  const gaps = labels - 1;
+  var retval = [];
+  var step = 1;
+  for (var l = gaps; l > 1; l--) {
+    if (length % l === 0) {
+      step = length / l;
+      break;
+    }
+  }
+  if (step === 1 && length > labels) {
+    step = length;
+  }
+  const fnDate = typeof formatOrLang === "function" ? formatOrLang : step >= MSECS_PER_DAY ? ((d) => d.toLocaleDateString(formatOrLang)) : ((d) => d.toLocaleTimeString(formatOrLang));
+  const fnDateFirst = typeof formatOrLang === "function" ? formatOrLang : step < MSECS_PER_DAY ? ((d) => d.toLocaleString(formatOrLang)) : fnDate;
+  const fnNum = typeof formatOrLang === "function" ? formatOrLang : (n) => n.toLocaleString(formatOrLang);
+  for (var j = 0; j <= length; j += step) {
+    let label;
+    switch (type) {
+      case "string":
+        if (j >= items.length) {
+          continue;
+        }
+        label = items[j].label;
+        break;
+      case "number":
+        label = fnNum(min + j);
+        break;
+      case "date":
+        let date = Utils.parseDate(min + j);
+        let fn = j == 0 ? fnDateFirst : fnDate;
+        label = fn(date);
+        break;
+      default:
+        throw "Not supported.";
+    }
+    retval.push(label);
+  }
+  return retval;
+}
+function getRoundedBoundaries(min, max, desiredSteps) {
+  desiredSteps ??= Math.min(bestGuessedDensity(min, max), MAX_Y_LABELS);
+  const roughStep = (max - min) / desiredSteps;
+  const magnitude = Math.pow(10, Math.floor(Math.log10(roughStep)));
+  const step = [1, 2, 5, 10].map((n) => n * magnitude).filter((s) => s >= roughStep).reduce((min2, s) => Math.min(min2, s), Number.POSITIVE_INFINITY);
+  return {
+    min: Math.floor(min / step) * step,
+    max: Math.ceil(max / step) * step,
+    round: step
+  };
+}
+function bestGuessedDensity(min, max) {
+  const delta = max - min;
+  if (!(delta > 0)) {
+    return 2;
+  }
+  const oom = Math.floor(Math.log10(delta));
+  const exp = Math.pow(10, -oom);
+  if (oom != 0) {
+    return bestGuessedDensity(min * exp, max * exp);
+  }
+  const capFn = (n) => {
+    const norm = Math.floor(Math.abs(n) * 10), limit = norm + 10 - norm % 10;
+    return limit.roundoff();
+  };
+  const b = capFn(delta);
+  let a = 10;
+  if (min !== 0) {
+    a = capFn(Math.abs(max));
+  }
+  const ret = gcd(a, b);
+  return ret === 1 ? b : Math.max(ret, 10 - ret);
+}
+function gcd(a, b) {
+  if (a <= 0) {
+    return b;
+  }
+  return gcd(b % a, a);
+}
+var ChartEvent = class extends CustomUIEvent {
+  constructor(type, eventInit, originalEvent) {
+    super(type, eventInit, originalEvent);
+  }
+};
+var PacemChartSeriesElement = class PacemChartSeriesElement2 extends Components.PacemItemElement {
+  get values() {
+    return this.datasource;
+  }
+};
+__decorate([
+  Watch({ emit: true, converter: PropertyConverters.Json })
+], PacemChartSeriesElement.prototype, "datasource", void 0);
+__decorate([
+  Watch({ emit: true, converter: PropertyConverters.String })
+], PacemChartSeriesElement.prototype, "label", void 0);
+__decorate([
+  Watch({ emit: true, converter: PropertyConverters.String })
+], PacemChartSeriesElement.prototype, "color", void 0);
+__decorate([
+  Watch({ emit: true, converter: PropertyConverters.Boolean })
+], PacemChartSeriesElement.prototype, "datapoints", void 0);
+__decorate([
+  Watch(
+    /* to be set programmatically (internally) */
+  )
+], PacemChartSeriesElement.prototype, "_uiElements", void 0);
+PacemChartSeriesElement = __decorate([
+  CustomElement({ tagName: P + "-chart-series" })
+], PacemChartSeriesElement);
+var SVG_NS = "http://www.w3.org/2000/svg";
+var PacemSeriesChartElement = class extends Components.PacemItemsContainerElement {
+  constructor() {
+    super();
+    this._itemPropertyChangedCallback = (evt) => {
+      const propName = evt.detail.propertyName;
+      if (propName === "datasource" || propName === "label" || propName === "datapoints" || propName === "cssClass" || propName === "color") {
+        this.draw();
+      }
+    };
+    this._series = [];
+    this._resizeHandler = (evt) => {
+      this._size = evt.detail;
+      this.draw();
+    };
+    this._broadcastHandler = (e) => {
+      const element = e.currentTarget;
+      const dataItem = CustomElementUtils.getAttachedPropertyValue(element, SERIES_DATAITEM);
+      if (Utils.isNull(dataItem)) {
+        return;
+      }
+      const chart = this, anchorPoint = chart.getAnchorPoint(element);
+      const evt = new ChartEvent("item" + e.type, { detail: { dataItem, anchorPoint } }, e);
+      const series = CustomElementUtils.getAttachedPropertyValue(element, SERIES_SERIES);
+      if (series instanceof PacemChartSeriesElement) {
+        series.dispatchEvent(evt);
+      }
+      chart.dispatchEvent(evt);
+    };
+    this._key = Utils.uniqueCode();
+  }
+  validate(item) {
+    return item instanceof PacemChartSeriesElement;
+  }
+  register(item) {
+    if (super.register(item)) {
+      item.addEventListener(PropertyChangeEventName, this._itemPropertyChangedCallback, false);
+      return true;
+    }
+    return false;
+  }
+  unregister(item) {
+    if (super.unregister(item)) {
+      item.removeEventListener(PropertyChangeEventName, this._itemPropertyChangedCallback, false);
+      return true;
+    }
+    return false;
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (name === "target") {
+      if (this._div != old) {
+        this._div && this._div.remove();
+      }
+      this._div = null;
+      this._body = null;
+      const eold = old;
+      if (eold) {
+        eold.classList.remove(PCSS + "-chart-area");
+        eold.innerHTML = "";
+      }
+      this._ensureResizer();
+      this.draw();
+    } else if (!first) {
+      switch (name) {
+        case "items":
+          this._databindAndDrawDebounced();
+          break;
+        case "datasource":
+          this._databind();
+        // fall down to draw() call.
+        case "yAxisDensity":
+        case "xAxisDensity":
+        case "xAxisType":
+        case "yAxisMax":
+        case "xAxisPosition":
+        case "yAxisFormat":
+          this.draw();
+          break;
+      }
+    }
+  }
+  _databindAndDrawDebounced() {
+    cancelAnimationFrame(this._handle);
+    this._handle = requestAnimationFrame(() => {
+      this._databind();
+      this.draw();
+    });
+  }
+  _databind() {
+    this._datasource = Utils.isNullOrEmpty(this.datasource) ? this.items : this.datasource;
+  }
+  disconnectedCallback() {
+    this._div && this._div.remove();
+    const resizer = this._resizer;
+    if (!Utils.isNull(resizer)) {
+      resizer.removeEventListener(Components.ResizeEventName, this._resizeHandler, false);
+      resizer.remove();
+      this._resizer = null;
+    }
+    super.disconnectedCallback();
+  }
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    this._ensureResizer();
+    this._databind();
+    this.draw();
+  }
+  _ensureResizer(target = this.target || this._div) {
+    if (Utils.isNull(this._resizer)) {
+      const shell = CustomElementUtils.findAncestorShell(this);
+      const resizer = this._resizer = shell.appendChild(new Components.PacemResizeElement());
+      resizer.addEventListener(Components.ResizeEventName, this._resizeHandler, false);
+    }
+    this._resizer.target = target;
+  }
+  // #region OO-scoped props
+  get chartSize() {
+    return this._size;
+  }
+  get chartSeries() {
+    return this._series;
+  }
+  get chartBody() {
+    return this._body;
+  }
+  get chartGrid() {
+    return this._grid;
+  }
+  get chartMask() {
+    return this._mask;
+  }
+  get chartKey() {
+    return this._key;
+  }
+  get chartContainer() {
+    return this._div;
+  }
+  assignUiBehaviors(ui, series, data, color) {
+    const alreadyRegistered = !Utils.isNull(CustomElementUtils.getAttachedPropertyValue(ui, SERIES_DATAITEM));
+    const item = Utils.extend({ series: series.label, color: color || series.color }, data);
+    CustomElementUtils.setAttachedPropertyValue(ui, SERIES_DATAITEM, item);
+    CustomElementUtils.setAttachedPropertyValue(ui, SERIES_SERIES, series);
+    if (!alreadyRegistered) {
+      MANAGED_EVENTS.forEach((type) => {
+        ui.addEventListener(type, this._broadcastHandler);
+      });
+    }
+  }
+  disposeUiBehaviors(ui) {
+    CustomElementUtils.deleteAttachedPropertyValue(ui, SERIES_DATAITEM);
+    CustomElementUtils.deleteAttachedPropertyValue(ui, SERIES_SERIES);
+    MANAGED_EVENTS.forEach((type) => {
+      ui.removeEventListener(type, this._broadcastHandler);
+    });
+  }
+  ensureChartContainer() {
+    if (Utils.isNull(this._div)) {
+      let div = this._div = this.target || document.createElement("div");
+      div.classList.add(PCSS + "-chart-area");
+      if (div != this.target) {
+        this.parentElement.insertBefore(div, this);
+      }
+    }
+    return this._div;
+  }
+  ensureChartBody(type, w, h) {
+    if (Utils.isNull(this._body)) {
+      let svg = this._body = document.createElementNS(SVG_NS, "svg");
+      svg.setAttribute("pacem", "");
+      svg.setAttribute("class", PCSS + "-" + type + "-chart");
+      svg.setAttribute("preserveAspectRatio", "xMinYMax slice");
+      const g = this._grid = document.createElementNS(SVG_NS, "svg");
+      g.setAttribute("pacem", "");
+      g.setAttribute("class", "chart-grid");
+      let defs = document.createElementNS(SVG_NS, "defs");
+      let mask = this._mask = document.createElementNS(SVG_NS, "mask");
+      let rect = document.createElementNS(SVG_NS, "rect");
+      rect.setAttribute("x", "0");
+      rect.setAttribute("y", "0");
+      rect.setAttribute("width", "100%");
+      rect.setAttribute("height", "100%");
+      let rect0 = document.createElementNS(SVG_NS, "rect");
+      rect0.setAttribute("y", "0");
+      rect0.setAttribute("width", "100%");
+      rect0.setAttribute("fill", "#fff");
+      mask.id = "gnrc_mask_" + this._key;
+      mask.appendChild(rect);
+      mask.appendChild(rect0);
+      defs.appendChild(mask);
+      svg.appendChild(defs);
+      svg.appendChild(g);
+      this._div.appendChild(svg);
+    }
+    return this._body;
+  }
+  chartDataItemToPoint(input, source) {
+    switch (this.xAxisType || "string") {
+      case "number":
+        return { x: parseFloat(input.label), y: input.value };
+      case "date":
+        return { x: Utils.parseDate(input.label).valueOf(), y: input.value };
+      case "string":
+        return { x: source.findIndex((e) => e.label == input.label), y: input.value };
+      default:
+        throw "Not supported.";
+    }
+  }
+  getVirtualGrid(items, minX, maxX, minY, maxY, xAxisType = this.xAxisType, steps, labels) {
+    const rangeY = getRoundedBoundaries(minY, maxY, steps), stepY = rangeY.round;
+    var y = [];
+    for (let j = rangeY.min; j <= rangeY.max; j += stepY) {
+      y.push(j.roundoff());
+    }
+    let lang = Utils.lang(this);
+    let format = null;
+    const intl = this.xAxisFormat;
+    if (!Utils.isNullOrEmpty(intl)) {
+      switch (xAxisType) {
+        case "number":
+          format = (n) => Intl.NumberFormat(lang, intl).format(n);
+          break;
+        case "date":
+          format = (n) => Intl.DateTimeFormat(lang, intl).format(Utils.parseDate(n));
+          break;
+      }
+    }
+    const x = getEvenlySpaced(items, xAxisType, minX, maxX, format ?? lang, labels);
+    return { x, y };
+  }
+  wipeOut(series = this._series, startIndex = 0) {
+    for (var j = series.length - 1; j >= startIndex; j--) {
+      series[j].remove();
+    }
+    series.splice(startIndex);
+  }
+  buildLinearGradient(seriesIndex, invert = false) {
+    const grad = document.createElementNS(SVG_NS, "linearGradient");
+    grad.id = this.chartKey + "_grad" + seriesIndex + (invert ? "_inverted" : "");
+    if (invert) {
+      Utils.addClass(grad, "bottom-up");
+    }
+    grad.setAttribute("x1", "0%");
+    grad.setAttribute("x2", "0%");
+    grad.setAttribute("y1", "0%");
+    grad.setAttribute("y2", "100%");
+    grad.setAttribute("spreadMethod", "pad");
+    const stop1 = document.createElementNS(SVG_NS, "stop");
+    stop1.setAttribute("offset", "0%");
+    const stop2 = document.createElementNS(SVG_NS, "stop");
+    stop2.setAttribute("offset", "100%");
+    grad.appendChild(stop1);
+    grad.appendChild(stop2);
+    return grad;
+  }
+  setGradientColor(grad, color) {
+    for (let j = 0; j < grad.children.length; j++) {
+      const stop = grad.children.item(j);
+      if (stop instanceof SVGStopElement) {
+        stop.style.stopColor = color;
+      }
+    }
+  }
+  estimateYAxisLabelWidth(max) {
+    const txt = this.formatYAxisLabel(max);
+    return this.estimateLabelWidth(txt);
+  }
+  estimateLabelWidth(txt) {
+    const grid = this._grid;
+    if (Utils.isNull(grid)) {
+      throw new Error("Unable to estimate label without an underlying grid available.");
+    }
+    const lbl = document.createElementNS(SVG_NS, "text");
+    lbl.textContent = txt;
+    grid.appendChild(lbl);
+    const size = Utils.offset(lbl);
+    lbl.remove();
+    return size.width;
+  }
+  formatYAxisLabel(y) {
+    const intl = this.yAxisFormat;
+    return Utils.isNullOrEmpty(intl) ? y.toString() : Intl.NumberFormat(Utils.lang(this), intl).format(y);
+  }
+  estimateXAxisLabelWidth(max) {
+    const txt = this.formatXAxisLabel(max);
+    return this.estimateLabelWidth(txt);
+  }
+  formatXAxisLabel(x) {
+    const intl = this.xAxisFormat, lang = Utils.lang(this);
+    switch (this.xAxisType) {
+      case "date":
+        const date = Utils.Dates.parse(x);
+        return Utils.isNullOrEmpty(intl) ? date.toLocaleString(lang) : Intl.DateTimeFormat(lang, intl).format(date);
+      case "number":
+        const num = x;
+        return Utils.isNullOrEmpty(intl) ? num.toLocaleString(lang) : Intl.NumberFormat(lang, intl).format(num);
+      default:
+        return x;
+    }
+  }
+  draw() {
+    this.drawSeries(this._datasource);
+  }
+  /**
+   * Default implementation.
+   * @param element
+   */
+  getAnchorPoint(element) {
+    const rect = Utils.offset(element);
+    return { x: rect.left + rect.width * 0.5, y: rect.top + rect.height * 0.5 };
+  }
+};
+__decorate([
+  Watch({ converter: PropertyConverters.Element })
+], PacemSeriesChartElement.prototype, "target", void 0);
+__decorate([
+  Watch({ emit: false, converter: PropertyConverters.String })
+], PacemSeriesChartElement.prototype, "xAxisType", void 0);
+__decorate([
+  Watch({ emit: false, converter: PropertyConverters.String })
+], PacemSeriesChartElement.prototype, "xAxisPosition", void 0);
+__decorate([
+  Watch({ emit: false, converter: PropertyConverters.Json })
+], PacemSeriesChartElement.prototype, "datasource", void 0);
+__decorate([
+  Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemSeriesChartElement.prototype, "yAxisDensity", void 0);
+__decorate([
+  Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemSeriesChartElement.prototype, "xAxisDensity", void 0);
+__decorate([
+  Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemSeriesChartElement.prototype, "yAxisMin", void 0);
+__decorate([
+  Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemSeriesChartElement.prototype, "yAxisMax", void 0);
+__decorate([
+  Watch({ emit: false, converter: PropertyConverters.Json })
+], PacemSeriesChartElement.prototype, "yAxisFormat", void 0);
+__decorate([
+  Watch({ emit: false, converter: PropertyConverters.Json })
+], PacemSeriesChartElement.prototype, "xAxisFormat", void 0);
+__decorate([
+  Throttle(true)
+], PacemSeriesChartElement.prototype, "draw", null);
+
+// packages/charts/dist/esm/generic.js
+import { CustomElement as CustomElement2, Watch as Watch2, PropertyConverters as PropertyConverters2, P as P2, PCSS as PCSS2, Utils as Utils2, CustomElementUtils as CustomElementUtils2, Logging } from "@pacem/pacem-core";
+var __decorate2 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+function getSplineCtrlPoints(p, p0, p1) {
+  let c0 = p, c1 = p;
+  const p0Null = Utils2.isNull(p0), p1Null = Utils2.isNull(p1);
+  if (!(p0Null && p1Null)) {
+    const portion = 3;
+    let m0, m1;
+    if (!p0Null) {
+      m0 = (p.y - p0.y) / (p.x - p0.x);
+    }
+    if (!p1Null) {
+      m1 = (p1.y - p.y) / (p1.x - p.x);
+    }
+    const m = ((m1 || (m0 || 0)) + (m0 || (m1 || 0))) / 2;
+    const dx0 = p0Null ? 0 : (p.x - p0.x) / portion;
+    const dx1 = p1Null ? 0 : (p1.x - p.x) / portion;
+    c0 = { x: p.x - dx0, y: p.y - dx0 * m };
+    c1 = { x: p.x + dx1, y: p.y + dx1 * m };
+  }
+  return { c0, c1 };
+}
+var GET_VAL = CustomElementUtils2.getAttachedPropertyValue;
+var SET_VAL = CustomElementUtils2.setAttachedPropertyValue;
+var DEL_VAL = CustomElementUtils2.deleteAttachedPropertyValue;
+var PADDING_PIXELS = 24;
+var SERIES_MAGNITUDE = "pacem:chart-series:area";
+var SVG_NS2 = "http://www.w3.org/2000/svg";
+var PacemChartElement = class PacemChartElement2 extends PacemSeriesChartElement {
+  constructor() {
+    super(...arguments);
+    this.#hover = false;
+    this._enterHandler = (evt) => {
+      this.#hover = true;
+    };
+    this._leaveHandler = (evt) => {
+      this.#hover = false;
+    };
+    this._moveHandler = (evt) => {
+      if (!this.#hover) {
+        return;
+      }
+    };
+    this._chartFillSeries = [];
+  }
+  // TODO: implement
+  // @Watch({ converter: PropertyConverters.String }) hoverMode: 'abscissa' | 'point'; // 'point' assumed as default
+  _getVirtualGrid(items, minX, maxX, minY, maxY, xAxisType = this.xAxisType, steps, labels) {
+    return super.getVirtualGrid(items, minX, maxX, minY, maxY, xAxisType, steps, labels);
+  }
+  _wipe(series = this.chartSeries, startIndex = 0) {
+    super.wipeOut(series, startIndex);
+  }
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    this._setupBehavior();
+  }
+  disconnectedCallback() {
+    this._dismantleBehavior();
+    super.disconnectedCallback();
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    switch (name) {
+      case "type":
+      case "aspectRatio":
+        this.draw();
+        break;
+    }
+  }
+  _setupBehavior() {
+    this.addEventListener("mouseenter", this._enterHandler, false);
+    this.addEventListener("mouseleave", this._enterHandler, false);
+    this.addEventListener("mousemove", this._moveHandler, false);
+  }
+  _dismantleBehavior() {
+    this.removeEventListener("mouseenter", this._enterHandler, false);
+    this.removeEventListener("mouseleave", this._leaveHandler, false);
+    this.removeEventListener("mousemove", this._moveHandler, false);
+  }
+  #hover;
+  _buildLinearGradient(seriesIndex) {
+    return super.buildLinearGradient(seriesIndex);
+  }
+  _setGradientColor(grad, color) {
+    super.setGradientColor(grad, color);
+  }
+  drawSeries(datasource) {
+    if (!this.isReady || Utils2.isNull(this.chartSize)) {
+      return;
+    }
+    this.ensureChartContainer();
+    const type = this.type || "line";
+    const padding = PADDING_PIXELS;
+    var size = this.chartSize;
+    if (size.height <= padding || size.width <= padding) {
+      return;
+    }
+    if (Utils2.isNullOrEmpty(datasource) || datasource.every((i) => Utils2.isNullOrEmpty(i.values))) {
+      this._wipe();
+      return;
+    }
+    const body = this.ensureChartBody("line", size.width, size.height);
+    this.log(Logging.LogLevel.Debug, `Drawing ${type} chart.`);
+    const xAxisType = this.xAxisType || "string";
+    let minY = this.yAxisMin ?? Number.NaN, maxY = this.yAxisMax ?? Number.NaN, minX = Number.NaN, maxX = Number.NaN;
+    let stretch = 1;
+    for (let series of datasource) {
+      let data = series.values;
+      if (data && data.length) {
+        let j2 = 0;
+        for (let item of data) {
+          let pt = this.chartDataItemToPoint(item, data);
+          if (Utils2.isNull(this.yAxisMin)) {
+            minY = isNaN(minY) ? pt.y : Math.min(minY, pt.y);
+          }
+          if (Utils2.isNull(this.yAxisMax)) {
+            maxY = isNaN(maxY) ? pt.y : Math.max(maxY, pt.y);
+          }
+          if (j2 === 0)
+            minX = isNaN(minX) ? pt.x : Math.min(minX, pt.x);
+          else if (j2 === data.length - 1)
+            maxX = isNaN(maxX) ? pt.x : Math.max(maxX, pt.x);
+          j2++;
+        }
+      }
+    }
+    const withValues = datasource.find((i) => !Utils2.isNullOrEmpty(i.values));
+    const grid = this._getVirtualGrid(withValues.values, minX, maxX, minY, maxY, xAxisType, this.yAxisDensity, this.xAxisDensity);
+    const topGrid = grid.y[grid.y.length - 1], bottomGrid = grid.y[0];
+    if (topGrid === bottomGrid)
+      return;
+    const halfPad = padding * 0.5;
+    const maxYLabelLength = grid.y.reduce((max, i) => Math.max(max, this.estimateYAxisLabelWidth(i) + halfPad), padding);
+    const maxXLabelHalfLength = grid.x.reduce((max, i) => Math.max(max, this.estimateXAxisLabelWidth(i)), padding) * 0.5;
+    const paddingYAxis = Math.max(maxXLabelHalfLength, maxYLabelLength), paddingYAxisEnd = maxXLabelHalfLength;
+    const seriesWidth = size.width - paddingYAxis - paddingYAxisEnd;
+    const gridHeight = size.height - 2 * padding;
+    const seriesHeight = gridHeight * (1 - (topGrid - bottomGrid - (maxY - minY)) / (topGrid - bottomGrid));
+    const seriesY = gridHeight * (topGrid - maxY) / (topGrid - bottomGrid);
+    if (xAxisType !== "number" || this.aspectRatio !== "monometric" && this.aspectRatio !== "logaritmic") {
+      stretch = seriesWidth / seriesHeight;
+      body.setAttribute("height", size.height.toString());
+      body.setAttribute("width", size.width.toString());
+    }
+    body.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
+    let iter = 0;
+    const spanX = maxX - minX, spanY = maxY - minY;
+    const normX = 100 * stretch / spanX, normY = 100 / spanY;
+    const normPadding = 100 * padding / seriesHeight;
+    const buildPoint = (it, series) => {
+      let p = this.chartDataItemToPoint(it, series);
+      p.y *= normY;
+      p.x = (p.x - minX) * normX;
+      return p;
+    };
+    const chartSeries = this.chartSeries;
+    const chartFillSeries = this._chartFillSeries;
+    const chartGrid = this.chartGrid;
+    const splineHere = type === "spline" || type === "splinearea";
+    for (let series of datasource) {
+      let svg2, svgFill;
+      let grad;
+      if (chartSeries.length > iter) {
+        svg2 = chartSeries[iter];
+        svgFill = chartFillSeries[iter];
+        grad = svgFill.firstElementChild.firstElementChild;
+      } else {
+        svg2 = document.createElementNS(SVG_NS2, "svg");
+        svg2.setAttribute("pacem", "");
+        body.appendChild(svg2);
+        svgFill = document.createElementNS(SVG_NS2, "svg");
+        svgFill.setAttribute("pacem", "");
+        body.insertBefore(svgFill, body.children.item(iter + /* <defs> should remain the very first child and 'grid' the very second */
+        2));
+        const defs = document.createElementNS(SVG_NS2, "defs");
+        defs.appendChild(grad = this._buildLinearGradient(iter));
+        svgFill.appendChild(defs);
+        svgFill.appendChild(document.createElementNS(SVG_NS2, "path"));
+        chartFillSeries.push(svgFill);
+        svg2.appendChild(document.createElementNS(SVG_NS2, "path"));
+        chartSeries.push(svg2);
+      }
+      let className = "chart-series";
+      const fill = type === "area" || type === "splinearea";
+      if (!Utils2.isNullOrEmpty(series.className)) {
+        className += " " + series.className;
+      }
+      [svg2, svgFill].forEach((s) => {
+        s.setAttribute("class", className);
+        s.setAttribute("x", paddingYAxis.toString());
+        s.setAttribute("y", seriesY.toString());
+        s.setAttribute("width", seriesWidth.toString());
+        s.setAttribute("height", (seriesHeight + 2 * padding).toString());
+      });
+      Utils2.addClass(svgFill, PCSS2 + "-inert");
+      let pathFill = svgFill.children.item(1);
+      let path = svg2.firstElementChild;
+      path.style.stroke = series.color;
+      pathFill.style.stroke = path.style.fill = "none";
+      this._setGradientColor(grad, series.color);
+      pathFill.style.fill = `url(#${grad.id})`;
+      pathFill.style.display = fill ? "" : "none";
+      let d = "";
+      let data = series.values;
+      if (data && data.length) {
+        const addInteractivePoint = (center, j2, series2, dataItem, color) => {
+          const ndx = j2 + /* count the <path> child */
+          1;
+          let circle;
+          if (svg2.children.length > ndx) {
+            circle = svg2.children.item(ndx);
+          } else {
+            circle = document.createElementNS(SVG_NS2, "line");
+            circle.setAttribute("class", "circle");
+            svg2.appendChild(circle);
+          }
+          const x1 = center.x.toString(), y1 = (-center.y).toString();
+          circle.setAttribute("x1", x1);
+          circle.setAttribute("y1", y1);
+          circle.setAttribute("x2", x1);
+          circle.setAttribute("y2", y1);
+          circle.style.stroke = color;
+          this.assignUiBehaviors(circle, series2, dataItem, color);
+        };
+        const wipeExceedingPoints = () => {
+          const remaining = series.datapoints ? data.length + 1 : 1;
+          for (let k = svg2.children.length - 1; k >= remaining; k--) {
+            var circle = svg2.children.item(k);
+            this.disposeUiBehaviors(circle);
+            circle.remove();
+          }
+        };
+        if (splineHere) {
+          let pt0, pt, c0;
+          for (let j2 = 0; j2 < data.length; j2++) {
+            const item = data[j2];
+            if (isNaN(item.value)) {
+              continue;
+            }
+            if (!pt) {
+              pt = buildPoint(item, data);
+            }
+            let pt1;
+            if (splineHere && j2 < data.length - 1) {
+              pt1 = buildPoint(data[j2 + 1], data);
+            }
+            let areaSoFar = GET_VAL(series, SERIES_MAGNITUDE, 0);
+            areaSoFar += item.value;
+            SET_VAL(series, SERIES_MAGNITUDE, areaSoFar);
+            var c = getSplineCtrlPoints(pt, pt0, pt1);
+            d += Utils2.isNullOrEmpty(d) ? `M${pt.x},${-pt.y} ` : `C${c0.x},${-c0.y} ${c.c0.x},${-c.c0.y} ${pt.x},${-pt.y} `;
+            if (series.datapoints) {
+              addInteractivePoint(pt, j2, series, item, series.color);
+            }
+            pt0 = pt;
+            pt = pt1, c0 = c.c1;
+          }
+        } else {
+          let j2 = 0;
+          for (let item of data) {
+            if (isNaN(item.value)) {
+              continue;
+            }
+            const pt = buildPoint(item, data);
+            let areaSoFar = GET_VAL(series, SERIES_MAGNITUDE, 0);
+            areaSoFar += item.value;
+            SET_VAL(series, SERIES_MAGNITUDE, areaSoFar);
+            d += Utils2.isNullOrEmpty(d) ? `M${pt.x},${-pt.y} ` : `L${pt.x},${-pt.y} `;
+            if (series.datapoints) {
+              addInteractivePoint(pt, j2, series, item, series.color);
+            }
+            j2++;
+          }
+        }
+        wipeExceedingPoints();
+      }
+      path.setAttribute("d", d);
+      pathFill.setAttribute("d", d + `V${-minY * normY} H0 Z`);
+      iter++;
+    }
+    this._wipe(chartFillSeries, iter);
+    this._wipe(chartSeries, iter);
+    const w0 = 100 * stretch, h0 = 100 + 2 * normPadding, x0 = 0, y0 = maxY * normY + normPadding;
+    const svbox = `${x0} ${-y0} ${w0} ${h0}`;
+    for (var svg of chartSeries.concat(chartFillSeries)) {
+      svg.setAttribute("viewBox", svbox);
+    }
+    const chartMask = this.chartMask;
+    let mask = chartMask.children.item(1);
+    mask.setAttribute("x", x0.toString());
+    mask.setAttribute("height", (size.height - padding).toString());
+    chartGrid.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
+    if (grid.x.length <= 1 || grid.y.length <= 1) {
+      for (let j2 = chartGrid.children.length - 1; j2 >= 0; j2--) {
+        chartGrid.children.item(j2).remove();
+      }
+      return;
+    }
+    let pgrid;
+    if (chartGrid.children.length > 0) {
+      pgrid = chartGrid.children.item(0);
+    } else {
+      pgrid = document.createElementNS(SVG_NS2, "path");
+      chartGrid.appendChild(pgrid);
+    }
+    const tick = padding * 0.25;
+    let lblCounter = 0;
+    let ensureLabel = (index, x2, y2, txt) => {
+      const ndx = index + /* <path> is the first child element */
+      1;
+      let lbl;
+      if (chartGrid.children.length <= ndx) {
+        lbl = document.createElementNS(SVG_NS2, "text");
+        chartGrid.appendChild(lbl);
+      } else {
+        lbl = chartGrid.children.item(ndx);
+      }
+      lbl.textContent = txt;
+      lbl.setAttribute("x", x2.toString());
+      lbl.setAttribute("y", y2.toString());
+      return lbl;
+    };
+    let dgrid = `M${paddingYAxis},${padding} v${gridHeight}`;
+    let j = 0;
+    const xincr = seriesWidth / (grid.x.length - 1), yincr = gridHeight / (grid.y.length - 1);
+    if (this.xAxisPosition !== "none") {
+      for (var x of grid.x) {
+        const xcoord = paddingYAxis + j * xincr;
+        if (this.xAxisPosition === "top") {
+          dgrid += ` M${xcoord},${padding} v${-tick}`;
+          let lbl = ensureLabel(lblCounter++, xcoord, 0, x);
+          lbl.setAttribute("text-anchor", "middle");
+          lbl.setAttribute("alignment-baseline", "hanging");
+        } else {
+          let ycoord = gridHeight + padding;
+          dgrid += ` M${xcoord},${ycoord} v${tick}`;
+          ensureLabel(lblCounter++, xcoord, ycoord + padding, x).setAttribute("text-anchor", "middle");
+        }
+        j++;
+      }
+    }
+    j = 0;
+    for (var y of grid.y) {
+      const ycoord = gridHeight + padding - j * yincr, xcoord = paddingYAxis - tick;
+      dgrid += ` M${xcoord},${ycoord} H${seriesWidth + paddingYAxis}`;
+      let txt = this.formatYAxisLabel(y);
+      ensureLabel(lblCounter++, xcoord - tick, ycoord, txt).setAttribute("text-anchor", "end");
+      j++;
+    }
+    pgrid.setAttribute("d", dgrid);
+    for (let j2 = chartGrid.children.length - 1; j2 > lblCounter; j2--) {
+      chartGrid.children.item(j2).remove();
+    }
+  }
+};
+__decorate2([
+  Watch2({ emit: false, converter: PropertyConverters2.String })
+], PacemChartElement.prototype, "type", void 0);
+__decorate2([
+  Watch2({ converter: PropertyConverters2.String })
+], PacemChartElement.prototype, "aspectRatio", void 0);
+PacemChartElement = __decorate2([
+  CustomElement2({ tagName: P2 + "-chart" })
+], PacemChartElement);
+
+// packages/charts/dist/esm/column.js
+import { CustomElement as CustomElement3, Watch as Watch3, PropertyConverters as PropertyConverters3, P as P3, Utils as Utils3, Logging as Logging2 } from "@pacem/pacem-core";
+var __decorate3 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SVG_NS3 = "http://www.w3.org/2000/svg";
+var PADDING_PIXELS2 = 24;
+var PacemColumnChartElement = class PacemColumnChartElement2 extends PacemSeriesChartElement {
+  constructor() {
+    super(...arguments);
+    this.groupWidth = 0;
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (name === "type" || name === "groupWidth") {
+      this.draw();
+    }
+  }
+  _safen(w = this.groupWidth) {
+    return Math.min(1, Math.max(w || 0.75, 0));
+  }
+  drawSeries(datasource) {
+    if (!this.isReady || Utils3.isNull(this.chartSize)) {
+      return;
+    }
+    const div = this.ensureChartContainer();
+    const type = this.type || "cluster";
+    const padding = PADDING_PIXELS2;
+    var size = this.chartSize;
+    if (size.height <= padding || size.width <= padding) {
+      return;
+    }
+    if (Utils3.isNullOrEmpty(datasource) || datasource.every((i) => Utils3.isNullOrEmpty(i.values))) {
+      this.wipeOut();
+      return;
+    }
+    const body = this.ensureChartBody("column", size.width, size.height);
+    this.log(Logging2.LogLevel.Debug, `Drawing ${type} chart.`);
+    const xAxisType = this.xAxisType || "string";
+    let minY = this.yAxisMin ?? 0, maxY = this.yAxisMax ?? 0, minX = 0, maxX = 0, maxCount = 0;
+    let stretch = 1;
+    const accumulator = { negative: [], positive: [] };
+    for (let series of datasource) {
+      let data = series.values;
+      if (!Utils3.isNullOrEmpty(data)) {
+        let j2 = 0;
+        for (let item of data) {
+          accumulator.positive[j2] = accumulator.positive[j2] || 0;
+          accumulator.negative[j2] = accumulator.negative[j2] || 0;
+          let pt = this.chartDataItemToPoint(item, data);
+          if (Utils3.isNull(this.yAxisMin)) {
+            minY = Math.min(minY, pt.y);
+          }
+          if (Utils3.isNull(this.yAxisMax)) {
+            maxY = Math.max(maxY, pt.y);
+          }
+          minX = Math.min(minX, pt.x);
+          maxX = Math.max(maxX, pt.x);
+          if (pt.y > 0) {
+            accumulator.positive[j2] += pt.y;
+          } else if (pt.y < 0) {
+            accumulator.negative[j2] += pt.y;
+          }
+          j2++;
+        }
+        maxCount = Math.max(maxCount, data.length);
+      }
+    }
+    const stacked = type === "stack";
+    if (stacked) {
+      if (Utils3.isNull(this.yAxisMin))
+        minY = Math.min.apply(null, accumulator.negative);
+      if (Utils3.isNull(this.yAxisMax))
+        maxY = Math.max.apply(null, accumulator.positive);
+    }
+    if (maxX === 0 && maxX === minX) {
+      maxX = 1;
+    }
+    const slot = (maxX - minX) / maxCount, halfSlot = slot * 0.5, availSlot = slot * this._safen(this.groupWidth), halfAvailSlot = availSlot * 0.5;
+    const withValues = datasource.find((i) => !Utils3.isNullOrEmpty(i.values));
+    const grid = this.getVirtualGrid(withValues.values, minX - halfSlot, maxX + halfSlot, minY, maxY, xAxisType, this.yAxisDensity, this.xAxisDensity);
+    const topGrid = grid.y[grid.y.length - 1], bottomGrid = grid.y[0];
+    if (topGrid === bottomGrid) {
+      return;
+    }
+    const halfPad = PADDING_PIXELS2 * 0.5;
+    const paddingYAxis = grid.y.reduce((max, i) => Math.max(max, this.estimateYAxisLabelWidth(i) + halfPad), padding);
+    const seriesWidth = size.width - paddingYAxis - padding;
+    const gridHeight = size.height - 2 * padding;
+    const seriesHeight = gridHeight * (1 - (topGrid - bottomGrid - (maxY - minY)) / (topGrid - bottomGrid));
+    const seriesY = gridHeight * (topGrid - maxY) / (topGrid - bottomGrid);
+    stretch = seriesWidth / seriesHeight;
+    body.setAttribute("height", size.height.toString());
+    body.setAttribute("width", size.width.toString());
+    body.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
+    let iter = 0;
+    const spanX = maxX - minX, spanY = maxY - minY;
+    const normX = 100 * stretch / spanX, normY = 100 / spanY;
+    const normPadding = 100 * padding / seriesHeight;
+    const chartSeries = this.chartSeries;
+    const chartGrid = this.chartGrid;
+    const xPad = (halfSlot - minX) * normX;
+    const buildPoint = (it, series) => {
+      const p = this.chartDataItemToPoint(it, series);
+      return {
+        x: xPad + p.x * 2 * xPad,
+        y: p.y * normY
+      };
+    };
+    var accumulators = new Array(maxCount);
+    for (let series of datasource) {
+      let svg2;
+      let grad;
+      let gradInv;
+      let g;
+      if (chartSeries.length > iter) {
+        svg2 = chartSeries[iter];
+        grad = svg2.firstElementChild.firstElementChild;
+        gradInv = svg2.firstElementChild.lastElementChild;
+        g = svg2.lastElementChild;
+      } else {
+        svg2 = document.createElementNS(SVG_NS3, "svg");
+        svg2.setAttribute("pacem", "");
+        chartGrid.insertAdjacentElement("afterend", svg2);
+        const defs = document.createElementNS(SVG_NS3, "defs");
+        defs.appendChild(grad = this.buildLinearGradient(iter));
+        defs.appendChild(gradInv = this.buildLinearGradient(iter, true));
+        svg2.appendChild(defs);
+        svg2.appendChild(g = document.createElementNS(SVG_NS3, "g"));
+        chartSeries.push(svg2);
+      }
+      var className = "chart-series series-fill";
+      if (!Utils3.isNullOrEmpty(series.className)) {
+        className += " " + series.className;
+      }
+      svg2.setAttribute("class", className);
+      svg2.setAttribute("x", paddingYAxis.toString());
+      svg2.setAttribute("y", seriesY.toString());
+      svg2.setAttribute("width", seriesWidth.toString());
+      svg2.setAttribute("height", (seriesHeight + 2 * padding).toString());
+      const data = series.values;
+      const spinRect = (index) => {
+        while (index >= g.children.length) {
+          g.appendChild(document.createElementNS(SVG_NS3, "rect"));
+        }
+        const rect = g.children.item(index);
+        rect.style.stroke = series.color;
+        const gradient = data[index].value < 0 ? gradInv : grad;
+        this.setGradientColor(gradient, series.color);
+        rect.style.fill = `url(#${gradient.id})`;
+        return rect;
+      };
+      const precision = 10;
+      const assignVerticalCoordsCoords = (rect, pt0, pt, pt0Start = pt0) => {
+        const y2 = -Math.max(pt0.y, pt.y), h = Math.abs(pt.y - pt0.y);
+        const fnAssign = () => {
+          rect.setAttribute("y", y2.toFixed(precision));
+          rect.setAttribute("height", h.toFixed(precision));
+        };
+        if (!rect.hasAttribute("y")) {
+          rect.setAttribute("y", "-" + pt0Start.y.toFixed(precision));
+          rect.setAttribute("height", "0");
+          requestAnimationFrame(fnAssign);
+        } else {
+          fnAssign();
+        }
+      };
+      if (!Utils3.isNullOrEmpty(data)) {
+        ;
+        const pt00 = buildPoint({ value: 0, label: data[0].label }, data);
+        if (stacked) {
+          const iHalfAvailSlot = halfAvailSlot * normX, iAvailSlotAttr = (availSlot * normX).toFixed(precision);
+          for (let j2 = 0; j2 < data.length; j2++) {
+            const item = data[j2];
+            if (Utils3.isNullOrEmpty(accumulators[j2])) {
+              accumulators[j2] = { positive: 0, negative: 0 };
+            }
+            const accumulator2 = accumulators[j2];
+            let posCursor = accumulator2.positive, negCursor = accumulator2.negative;
+            const neg = item.value < 0, y2 = neg ? negCursor : posCursor + item.value, y02 = neg ? negCursor + item.value : posCursor;
+            const pt = buildPoint({ label: item.label, value: y2 }, data);
+            const pt0 = buildPoint({ label: item.label, value: y02 }, data);
+            const x2 = pt.x - iHalfAvailSlot;
+            const rect = spinRect(j2);
+            this.assignUiBehaviors(rect, series, item);
+            rect.setAttribute("x", x2.toFixed(precision));
+            rect.setAttribute("width", iAvailSlotAttr);
+            assignVerticalCoordsCoords(rect, pt0, pt, pt00);
+            if (neg) {
+              accumulator2.negative = y02;
+            } else {
+              accumulator2.positive = y2;
+            }
+          }
+        } else {
+          const iHalfAvailSlot = halfAvailSlot * normX, iSlot = iHalfAvailSlot * 2 / datasource.length, iSlotAttr = iSlot.toFixed(precision);
+          for (let j2 = 0; j2 < data.length; j2++) {
+            const item = data[j2];
+            const pt = buildPoint(item, data);
+            const x2 = pt.x - iHalfAvailSlot + iSlot * iter;
+            const rect = spinRect(j2);
+            this.assignUiBehaviors(rect, series, item);
+            rect.setAttribute("x", x2.toFixed(precision));
+            rect.setAttribute("width", iSlotAttr);
+            assignVerticalCoordsCoords(rect, pt00, pt);
+          }
+        }
+      }
+      for (let j2 = g.children.length - 1; j2 >= data?.length || 0; j2--) {
+        const rect = g.children.item(j2);
+        this.disposeUiBehaviors(rect);
+        rect.remove();
+      }
+      iter++;
+    }
+    this.wipeOut(chartSeries, iter);
+    const w0 = 100 * stretch, h0 = 100 + 2 * normPadding, x0 = 0, y0 = maxY * normY + normPadding;
+    const svbox = `${x0} ${-y0} ${w0} ${h0}`;
+    for (var svg of chartSeries) {
+      svg.setAttribute("viewBox", svbox);
+    }
+    const chartMask = this.chartMask;
+    let mask = chartMask.children.item(1);
+    mask.setAttribute("x", x0.toString());
+    mask.setAttribute("height", (size.height - padding).toString());
+    chartGrid.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
+    if (grid.x.length < 1 || grid.y.length <= 1) {
+      for (let j2 = chartGrid.children.length - 1; j2 >= 0; j2--) {
+        chartGrid.children.item(j2).remove();
+      }
+      return;
+    }
+    let pgrid;
+    if (chartGrid.children.length > 0) {
+      pgrid = chartGrid.children.item(0);
+    } else {
+      pgrid = document.createElementNS(SVG_NS3, "path");
+      chartGrid.appendChild(pgrid);
+    }
+    const tick = PADDING_PIXELS2 * 0.25;
+    let lblCounter = 0;
+    let ensureLabel = (index, x2, y2, txt) => {
+      const ndx = index + /* <path> is the first child element */
+      1;
+      let lbl;
+      if (chartGrid.children.length <= ndx) {
+        lbl = document.createElementNS(SVG_NS3, "text");
+        chartGrid.appendChild(lbl);
+      } else {
+        lbl = chartGrid.children.item(ndx);
+      }
+      lbl.textContent = txt;
+      lbl.setAttribute("x", x2.toString());
+      lbl.setAttribute("y", y2.toString());
+      return lbl;
+    };
+    let dgrid = `M${paddingYAxis},${padding} v${gridHeight}`;
+    let j = 0;
+    const xincr = seriesWidth / grid.x.length, yincr = gridHeight / (grid.y.length - 1);
+    if (this.xAxisPosition !== "none") {
+      const paddingX = xincr * 0.5 + paddingYAxis;
+      for (var x of grid.x) {
+        let xcoord = paddingX + j * xincr;
+        if (this.xAxisPosition === "top") {
+          dgrid += ` M${xcoord},${padding} v${-tick}`;
+          let lbl = ensureLabel(lblCounter++, xcoord, 0, x);
+          lbl.setAttribute("text-anchor", "middle");
+          lbl.setAttribute("alignment-baseline", "hanging");
+        } else {
+          let ycoord = gridHeight + padding;
+          dgrid += ` M${xcoord},${ycoord} v${tick}`;
+          ensureLabel(lblCounter++, xcoord, ycoord + padding, x).setAttribute("text-anchor", "middle");
+        }
+        j++;
+      }
+    }
+    j = 0;
+    for (var y of grid.y) {
+      const ycoord = gridHeight + padding - j * yincr, xcoord = paddingYAxis - tick;
+      dgrid += ` M${xcoord},${ycoord} H${seriesWidth + paddingYAxis}`;
+      let txt = this.formatYAxisLabel(y);
+      ensureLabel(lblCounter++, xcoord - tick, ycoord, txt).setAttribute("text-anchor", "end");
+      j++;
+    }
+    pgrid.setAttribute("d", dgrid);
+    for (let j2 = chartGrid.children.length - 1; j2 > lblCounter; j2--) {
+      chartGrid.children.item(j2).remove();
+    }
+  }
+};
+__decorate3([
+  Watch3({ converter: PropertyConverters3.String })
+], PacemColumnChartElement.prototype, "type", void 0);
+__decorate3([
+  Watch3({ converter: PropertyConverters3.Number })
+], PacemColumnChartElement.prototype, "groupWidth", void 0);
+PacemColumnChartElement = __decorate3([
+  CustomElement3({ tagName: P3 + "-column-chart" })
+], PacemColumnChartElement);
+
+// packages/charts/dist/esm/pie.js
+import { CustomElement as CustomElement4, Watch as Watch4, PropertyConverters as PropertyConverters4, P as P4, PCSS as PCSS3, Components as Components2, Utils as Utils4, CustomElementUtils as CustomElementUtils3, Debounce } from "@pacem/pacem-core";
+var __decorate4 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemPieSliceElement = class PacemPieSliceElement2 extends Components2.PacemItemElement {
+  constructor() {
+    super(...arguments);
+    this._broadcastHandler = (e) => {
+      this.emit(e);
+    };
+  }
+  findContainer() {
+    return CustomElementUtils3.findAncestorOfType(this, PacemPieChartElement);
+  }
+  get chart() {
+    return this.container;
+  }
+  /** Returns the center of mass (point) of this pie/doughnut slice, in absolute coords (pixels). */
+  getCenterOfMass() {
+    const area = this.chart && this.chart.area;
+    if (Utils4.isNull(area)) {
+      return null;
+    }
+    const rect = Utils4.offset(area), center = { x: rect.width / 2 + rect.left, y: rect.top + rect.height / 2 }, r = Math.min(rect.width, rect.height) * 0.5;
+    const pos = this.normalizedPolarCoords, angle = PI1_2 - pos.angle;
+    return {
+      y: center.y - r * pos.radius * Math.sin(angle),
+      x: center.x + r * pos.radius * Math.cos(angle)
+    };
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first && this.chart && name != "normalizedPolarCoords")
+      this.chart.draw();
+  }
+  /** @internal */
+  _assignUi(el) {
+    const ui = this._ui = el;
+    MANAGED_EVENTS.forEach((type) => {
+      ui.addEventListener(type, this._broadcastHandler);
+    });
+  }
+  /** @internal */
+  _disposeUi() {
+    if (!Utils4.isNull(this._ui)) {
+      MANAGED_EVENTS.forEach((type) => {
+        this._ui.removeEventListener(type, this._broadcastHandler);
+      });
+    }
+  }
+};
+__decorate4([
+  Watch4({ converter: PropertyConverters4.Number })
+], PacemPieSliceElement.prototype, "value", void 0);
+__decorate4([
+  Watch4({ converter: PropertyConverters4.String })
+], PacemPieSliceElement.prototype, "label", void 0);
+__decorate4([
+  Watch4({ converter: PropertyConverters4.String })
+], PacemPieSliceElement.prototype, "color", void 0);
+__decorate4([
+  Watch4({ converter: PropertyConverters4.Json })
+], PacemPieSliceElement.prototype, "normalizedPolarCoords", void 0);
+PacemPieSliceElement = __decorate4([
+  CustomElement4({ tagName: P4 + "-pie-slice" })
+], PacemPieSliceElement);
+var TWO_PI = Math.PI * 2;
+var PI1_2 = Math.PI * 0.5;
+var PacemPieChartElement = class PacemPieChartElement2 extends Components2.PacemItemsContainerElement {
+  constructor() {
+    super();
+    this.cutout = 0;
+    this.slicePadding = 0;
+    this._slices = /* @__PURE__ */ new WeakMap();
+    this._key = Utils4.uniqueCode();
+  }
+  validate(item) {
+    return item instanceof PacemPieSliceElement;
+  }
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    this.draw();
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (name === "target") {
+      this._g = null;
+      this._div && this._div.remove();
+      const eold = old;
+      if (eold) {
+        eold.classList.remove(PCSS3 + "-chart-area");
+        eold.innerHTML = "";
+      }
+      this.draw();
+    } else if (!first && (name === "cutout" || name === "items" || name === "slicePadding"))
+      this.draw();
+  }
+  get area() {
+    return this._svg;
+  }
+  disconnectedCallback() {
+    this._div && this._div.remove();
+    super.disconnectedCallback();
+  }
+  _ensureArea() {
+    if (Utils4.isNull(this._g)) {
+      let div = this.target || (this._div = document.createElement("div"));
+      div.classList.add(PCSS3 + "-chart-area");
+      let svg = this._svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.setAttribute("pacem", "");
+      svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+      svg.setAttribute("viewBox", "0 0 100 100");
+      svg.classList.add(PCSS3 + "-pie-chart");
+      let defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+      let g = this._g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      svg.appendChild(defs);
+      svg.appendChild(g);
+      div.appendChild(svg);
+      this._div && this.parentElement.insertBefore(div, this);
+    }
+    if (this.maskBasedRendering) {
+      if (Utils4.isNull(this._mask)) {
+        let mask = document.createElementNS("http://www.w3.org/2000/svg", "mask");
+        mask.id = "pie_mask_" + this._key;
+        let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        rect.setAttribute("x", "0");
+        rect.setAttribute("y", "0");
+        rect.setAttribute("width", "100");
+        rect.setAttribute("height", "100");
+        rect.setAttribute("fill", "#fff");
+        let circle = this._mask = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        circle.setAttribute("cx", "50");
+        circle.setAttribute("cy", "50");
+        const defs = this._svg.firstElementChild;
+        mask.appendChild(rect);
+        mask.appendChild(circle);
+        defs.appendChild(mask);
+        this._g.setAttribute("mask", `url(#${mask.id})`);
+      }
+      const cutout = 50 * this._safeCutout;
+      this._mask.setAttribute("r", `${cutout}`);
+    } else {
+      if (!Utils4.isNull(this._mask)) {
+        this._svg.firstElementChild.innerHTML = "";
+        this._mask = null;
+        this._g.removeAttribute("mask");
+      }
+    }
+    const paddingPixels = this._safeSlicePaddingPixels;
+    if (paddingPixels > 0) {
+      const matrix = this._svg.getCTM();
+      const paddingUnits = (paddingPixels / matrix.a).roundoff();
+      const maskId = this._sliceMaskId;
+      const defs = this._svg.firstElementChild;
+      let mask = defs.querySelector(`#${maskId}`);
+      if (Utils4.isNull(mask)) {
+        mask = document.createElementNS("http://www.w3.org/2000/svg", "mask");
+        mask.id = maskId;
+        defs.appendChild(mask);
+      } else {
+        mask.innerHTML = "";
+      }
+      const maskPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      const d = `M${50 + paddingUnits},0 H100 V100 H0 V0 H50 V50 h${paddingUnits} Z`;
+      maskPath.setAttribute("d", d);
+      maskPath.setAttribute("fill", "#fff");
+      mask.appendChild(maskPath);
+    }
+    return this._g;
+  }
+  get _sliceMaskId() {
+    return "pieslice_mask_" + this._key;
+  }
+  get _safeCutout() {
+    return Math.min(1, Math.max(0, this.cutout)) || 0;
+  }
+  get _safeSlicePaddingPixels() {
+    return Math.max(0, this.slicePadding ?? 0);
+  }
+  _drawSlice(path, slice, whole, partial) {
+    const largeFlag = slice.value > 0.5 * whole ? 1 : 0;
+    const angle = TWO_PI * slice.value / whole;
+    const rot = 360 * partial / whole;
+    const x = slice.value >= whole ? (
+      /* handling single slice */
+      49.9
+    ) : 50 * (1 + Math.sin(angle));
+    const y = 50 * (1 - Math.cos(angle));
+    const c = this._safeCutout, r = c * 50;
+    path.style.fill = slice.color;
+    path.style.transform = `rotate(${rot}deg)`;
+    path.style.transformOrigin = "50% 50%";
+    const d = this.maskBasedRendering ? `M50,50 V0 A50,50 0 ${largeFlag} 1 ${x} ${y} L50,50 Z` : `M50,0 A50,50 0 ${largeFlag} 1 ${x} ${y} l${(50 - x) * (1 - c)},${(50 - y) * (1 - c)} A${r},${r} 0 ${largeFlag} 0 50,${50 - r} Z`;
+    path.setAttribute("d", d);
+    slice.normalizedPolarCoords = { radius: c + Math.SQRT1_2 * (1 - c), angle: (
+      /* deg to rad */
+      Math.PI * rot / 180 + angle / 2
+    ) };
+  }
+  _isSliceOk(slice) {
+    return !slice.disabled;
+  }
+  _padSlice(path) {
+    const paddingPixels = this._safeSlicePaddingPixels;
+    if (paddingPixels > 0) {
+      path.setAttribute("mask", `url(#${this._sliceMaskId})`);
+    } else {
+      path.removeAttribute("mask");
+    }
+  }
+  draw() {
+    const g = this._ensureArea(), pCount = g.children.length, chartArea = this._svg.parentElement;
+    let ndx = 0, sum = 0, progress = 0;
+    if (Utils4.isNullOrEmpty(this.items)) {
+      g.innerHTML = "";
+      Utils4.removeClass(chartArea, "chart-has-data");
+    } else {
+      Utils4.addClass(chartArea, "chart-has-data");
+      for (let slice of this.items) {
+        if (!this._isSliceOk(slice)) {
+          continue;
+        }
+        sum += slice.value;
+      }
+      if (sum <= 0) {
+        g.innerHTML = "";
+        Utils4.removeClass(chartArea, "chart-has-data");
+      } else {
+        for (let slice of this.items) {
+          if (!this._isSliceOk(slice)) {
+            continue;
+          }
+          let p;
+          if (ndx >= pCount) {
+            const g_n = document.createElementNS("http://www.w3.org/2000/svg", "g");
+            g_n.setAttribute("class", "chart-series " + PCSS3 + "-pie-slice" + (Utils4.isNullOrEmpty(slice.className) ? "" : " " + slice.className));
+            p = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            g_n.appendChild(p);
+            g.appendChild(g_n);
+            slice._assignUi(g_n);
+            this._slices.set(g_n, slice);
+          } else {
+            p = g.children.item(ndx).firstElementChild;
+          }
+          if (slice.value > 0) {
+            this._drawSlice(p, slice, sum, progress);
+            this._padSlice(p);
+            progress += slice.value;
+            p.removeAttribute("display");
+          } else {
+            p.setAttribute("display", "none");
+          }
+          ndx++;
+        }
+      }
+    }
+    while (ndx < g.children.length) {
+      const slices = this._slices, g_n = g.children.item(ndx);
+      if (slices.has(g_n)) {
+        slices.get(g_n)._disposeUi();
+        slices.delete(g_n);
+      }
+      g.removeChild(g_n);
+    }
+  }
+};
+__decorate4([
+  Watch4({ converter: PropertyConverters4.Number })
+], PacemPieChartElement.prototype, "cutout", void 0);
+__decorate4([
+  Watch4({ converter: PropertyConverters4.Element })
+], PacemPieChartElement.prototype, "target", void 0);
+__decorate4([
+  Watch4({ converter: PropertyConverters4.Boolean })
+], PacemPieChartElement.prototype, "maskBasedRendering", void 0);
+__decorate4([
+  Watch4({ converter: PropertyConverters4.Number })
+], PacemPieChartElement.prototype, "slicePadding", void 0);
+__decorate4([
+  Debounce(true)
+], PacemPieChartElement.prototype, "draw", null);
+PacemPieChartElement = __decorate4([
+  CustomElement4({ tagName: P4 + "-pie-chart" })
+], PacemPieChartElement);
+export {
+  index_components_exports as Components
+};
+//# sourceMappingURL=pacem-charts.mjs.map