@pacem/pacem-charts 1.0.0-abel

package/dist/esm/types.js

@@ -0,0 +1,504 @@
+var __decorate = (this && this.__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;
+};
+import { CustomElement, Watch, PropertyConverters, P, PCSS, Components, CustomUIEvent, CustomElementUtils, Utils, Throttle, PropertyChangeEventName } from '@pacem/pacem-core';
+//namespace Pacem.Components.Charts {
+export const MANAGED_EVENTS = ['keydown', 'keyup', 'click', 'dblclick', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'mousedown', 'mouseup', 'mousemove', 'contextmenu'];
+;
+//function logN(N, x) {
+//    return Math.log10(x) / Math.log10(N);
+//}
+const MSECS_PER_DAY = 1000 * 60 * 60 * 24;
+const MAX_X_LABELS = 10;
+const MAX_Y_LABELS = 10;
+const SERIES_DATAITEM = 'pacem:chart-series:dataitem';
+const 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 /* coprime number? */ && 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((min, s) => Math.min(min, s), Number.POSITIVE_INFINITY);
+    return {
+        min: Math.floor(min / step) * step,
+        max: Math.ceil(max / step) * step,
+        round: step
+    };
+}
+// Deprecated
+//function getRoundedBoundariesOld(a0: number, a1: number, steps?: number) {
+//    if (!(steps > 0)) {
+//        steps = bestGuessedDensity(a0, a1);
+//    }
+//    const magn = logN(steps, a1 - a0),
+//        exp = magn % 1 == 0 ? magn - 1 : magn,
+//        rounder = Math.pow(steps, Math.floor(exp));
+//    return {
+//        min: Math.floor(a0 / rounder) * rounder,
+//        max: Math.ceil(a1 / rounder) * rounder,
+//        round: rounder
+//    };
+//}
+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);
+    // bring everything to a single digit format
+    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);
+}
+export class ChartEvent extends CustomUIEvent {
+    constructor(type, eventInit, originalEvent) {
+        super(type, eventInit, originalEvent);
+    }
+}
+let PacemChartSeriesElement = class PacemChartSeriesElement 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);
+export { PacemChartSeriesElement };
+const SVG_NS = "http://www.w3.org/2000/svg";
+export class PacemSeriesChartElement 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();
+        };
+        // #endregion
+        this._broadcastHandler = (e) => {
+            /* Don't mess with the events:
+             * keep the original (trusted) events with their well-known names
+             * and provide a method to retrieve the 'ChartDataItem' based on the the eventTarget. */
+            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();
+            }
+            // reset
+            this._div = null;
+            this._body = null; // <- get checked on next draw
+            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');
+            // put mask on series
+            let defs = document.createElementNS(SVG_NS, 'defs');
+            let mask = this._mask = document.createElementNS(SVG_NS, 'mask');
+            // black (hides)
+            let rect = document.createElementNS(SVG_NS, 'rect');
+            rect.setAttribute('x', '0');
+            rect.setAttribute('y', '0');
+            rect.setAttribute('width', '100%');
+            rect.setAttribute('height', '100%');
+            // white (shows)
+            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);
+            // place mask on series so that lines won't be rendered outside the grid borders
+            //g2.setAttribute('mask', 'url(#' + mask.id + ')');
+            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;
+        // fill y-axis array
+        var y = [];
+        for (let j = rangeY.min; j <= rangeY.max; j += stepY) {
+            y.push(j.roundoff());
+        }
+        // fill x-axis array;
+        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 * .5, y: rect.top + rect.height * .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);

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@pacem/pacem-charts",
+  "files": [
+    "dist/browser/*.*",
+    "dist/bundle/*.*",
+    "dist/esm/*.*",
+    "typings/*.*",
+    "README.md",
+    "LICENSE",
+    "NOTICE",
+    "package.json"
+  ],
+  "type": "module",
+  "dependencies": {
+    "@pacem/pacem-foundation": "*",
+    "@pacem/pacem-core": "*"
+  },
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "typings": "./typings/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "types": "./typings/index.d.ts"
+    }
+  },
+  "version": "1.0.0-abel",
+  "author": {
+    "name": "Pacem",
+    "url": "https://pacem.it"
+  },
+  "license": "Apache-2.0",
+  "homepage": "https://js.pacem.it",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pacem-it/pacem.git"
+  }
+}