@pacem/pacem-charts 1.0.0-abel

package/dist/esm/generic.js

@@ -0,0 +1,437 @@
+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, Utils, CustomElementUtils, Logging } from '@pacem/pacem-core';
+import { PacemSeriesChartElement } from './types';
+//namespace Pacem.Components.Charts {
+/**
+ * Returns the anchor points for a Bézier curve.
+ * @param p The actual point.
+ * @param p0 The previous point, if any.
+ * @param p1 The next point, if any.
+ */
+function getSplineCtrlPoints(p, p0, p1) {
+    let c0 = p, c1 = p;
+    const p0Null = Utils.isNull(p0), p1Null = Utils.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);
+        }
+        // average slope
+        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: c0, c1: c1 };
+}
+const GET_VAL = CustomElementUtils.getAttachedPropertyValue;
+const SET_VAL = CustomElementUtils.setAttachedPropertyValue;
+const DEL_VAL = CustomElementUtils.deleteAttachedPropertyValue;
+const PADDING_PIXELS = 24;
+const SERIES_MAGNITUDE = 'pacem:chart-series:area';
+const SVG_NS = "http://www.w3.org/2000/svg";
+let PacemChartElement = class PacemChartElement 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 || Utils.isNull(this.chartSize)) {
+            return;
+        }
+        this.ensureChartContainer();
+        const type = this.type || 'line';
+        const padding = PADDING_PIXELS;
+        // resize all
+        var size = this.chartSize;
+        if (size.height <= padding || size.width <= padding) {
+            return;
+        }
+        // items && labels?
+        if (Utils.isNullOrEmpty(datasource) || datasource.every(i => Utils.isNullOrEmpty(i.values))) {
+            this._wipe();
+            return;
+        }
+        const body = this.ensureChartBody('line', size.width, size.height);
+        // from now on, drawing...
+        this.log(Logging.LogLevel.Debug, `Drawing ${type} chart.`);
+        // #region computations
+        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;
+        // individuate the min/max x & y in order correctly apply aspect ratio...
+        for (let series of datasource) {
+            let data = series.values;
+            if (data && data.length) {
+                let j = 0;
+                for (let item of data) {
+                    let pt = this.chartDataItemToPoint(item, data);
+                    if (Utils.isNull(this.yAxisMin)) {
+                        minY = isNaN(minY) ? pt.y : Math.min(minY, pt.y);
+                    }
+                    if (Utils.isNull(this.yAxisMax)) {
+                        maxY = isNaN(maxY) ? pt.y : Math.max(maxY, pt.y);
+                    }
+                    if (j === 0)
+                        minX = isNaN(minX) ? pt.x : Math.min(minX, pt.x);
+                    else if (j === data.length - 1)
+                        maxX = isNaN(maxX) ? pt.x : Math.max(maxX, pt.x);
+                    j++;
+                }
+            }
+        }
+        /** virtual grid made of x- and y-axis labels */
+        const withValues = datasource.find(i => !Utils.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;
+        // estimate y-axis max width
+        const halfPad = padding * .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) * .5;
+        const paddingYAxis = Math.max(maxXLabelHalfLength, maxYLabelLength), paddingYAxisEnd = maxXLabelHalfLength; // Math.max(padding, this.estimateXAxisLabelWidth(minX) * .5 + PADDING_PIXELS);
+        /** width of the WHOLE series dedicated area */
+        const seriesWidth = size.width - paddingYAxis - paddingYAxisEnd;
+        /** height of the WHOLE series dedicated area */
+        const gridHeight = (size.height - 2 * padding);
+        const seriesHeight = gridHeight * (1 - (topGrid - bottomGrid - (maxY - minY)) / (topGrid - bottomGrid));
+        const seriesY = gridHeight * (topGrid - maxY) / (topGrid - bottomGrid);
+        // const seriesY2 = gridHeight * (minY - bottomGrid) / (topGrid - bottomGrid);
+        // if not a `graph`
+        if (xAxisType !== 'number' || (this.aspectRatio !== 'monometric' && this.aspectRatio !== 'logaritmic')) {
+            // consider padding
+            stretch = seriesWidth / seriesHeight;
+            body.setAttribute('height', size.height.toString());
+            body.setAttribute('width', size.width.toString());
+        }
+        body.setAttribute('viewBox', `0 0 ${size.width} ${size.height}`);
+        // #endregion
+        // #region render series
+        let iter = 0;
+        // normalize
+        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);
+            //pt.x *= normX;
+            p.y *= normY;
+            // Limit as much as possible the magnitude of a number inclued in the svg.
+            // Big numbers "overflow the renderer".
+            p.x = (p.x - minX) * normX;
+            //pt.y = (pt.y - minY) * normY;
+            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) {
+            // does the series svg exist?
+            let svg, svgFill;
+            let grad;
+            if (chartSeries.length > iter) {
+                svg = chartSeries[iter];
+                svgFill = chartFillSeries[iter];
+                grad = svgFill.firstElementChild.firstElementChild;
+            }
+            else {
+                svg = document.createElementNS(SVG_NS, 'svg');
+                svg.setAttribute('pacem', '');
+                body.appendChild(svg);
+                svgFill = document.createElementNS(SVG_NS, 'svg');
+                svgFill.setAttribute('pacem', '');
+                body.insertBefore(svgFill, body.children.item(iter + /* <defs> should remain the very first child and 'grid' the very second */ 2));
+                // 1st child - defs (gradient)
+                const defs = document.createElementNS(SVG_NS, 'defs');
+                defs.appendChild(grad = this._buildLinearGradient(iter));
+                svgFill.appendChild(defs);
+                // 2nd child - fill path
+                svgFill.appendChild(document.createElementNS(SVG_NS, 'path'));
+                chartFillSeries.push(svgFill);
+                // 1st child stroke path
+                svg.appendChild(document.createElementNS(SVG_NS, 'path'));
+                // 2nd + nth+1 child will be point circles
+                chartSeries.push(svg);
+            }
+            // series positioning:
+            /*
+             --------------------------------------
+             |   |--------------------------------|
+             |pad|         series here            |
+             |   |--------------------------------|
+             --------------------------------------
+             |   |             pad                |
+             --------------------------------------
+             */
+            let className = 'chart-series';
+            const fill = type === 'area' || type === 'splinearea';
+            if (!Utils.isNullOrEmpty(series.className)) {
+                className += ' ' + series.className;
+            }
+            [svg, 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());
+            });
+            Utils.addClass(svgFill, PCSS + '-inert');
+            // pick path as single child element for the series.
+            let pathFill = svgFill.children.item(1);
+            let path = svg.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, j, series, dataItem, color) => {
+                    const ndx = j + /* count the <path> child */ 1;
+                    let circle;
+                    if (svg.children.length > ndx) {
+                        circle = svg.children.item(ndx);
+                    }
+                    else {
+                        circle = document.createElementNS(SVG_NS, 'line');
+                        circle.setAttribute('class', 'circle');
+                        svg.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, series, dataItem, color);
+                };
+                const wipeExceedingPoints = () => {
+                    const remaining = series.datapoints ? (data.length + 1) : 1;
+                    for (let k = svg.children.length - 1; k >= remaining; k--) {
+                        var circle = svg.children.item(k);
+                        this.disposeUiBehaviors(circle);
+                        circle.remove();
+                    }
+                };
+                if (splineHere) {
+                    // #region SPLINE
+                    let pt0, pt, c0;
+                    for (let j = 0; j < data.length; j++) {
+                        const item = data[j];
+                        if (isNaN(item.value)) {
+                            continue;
+                        }
+                        if (!pt) {
+                            pt = buildPoint(item, data);
+                        }
+                        let pt1;
+                        if (splineHere && j < (data.length - 1)) {
+                            pt1 = buildPoint(data[j + 1], data);
+                        }
+                        // accumulate `area` for sorting
+                        let areaSoFar = GET_VAL(series, SERIES_MAGNITUDE, 0);
+                        areaSoFar += item.value;
+                        SET_VAL(series, SERIES_MAGNITUDE, areaSoFar);
+                        var c = getSplineCtrlPoints(pt, pt0, pt1);
+                        d += Utils.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, j, series, item, series.color);
+                        }
+                        // step next
+                        pt0 = pt;
+                        pt = pt1, c0 = c.c1;
+                    }
+                    // #endregion
+                }
+                else {
+                    // #region LINE
+                    let j = 0;
+                    for (let item of data) {
+                        if (isNaN(item.value)) {
+                            continue;
+                        }
+                        const pt = buildPoint(item, data);
+                        // accumulate `area` for sorting
+                        let areaSoFar = GET_VAL(series, SERIES_MAGNITUDE, 0);
+                        areaSoFar += item.value;
+                        SET_VAL(series, SERIES_MAGNITUDE, areaSoFar);
+                        d += Utils.isNullOrEmpty(d) ? `M${pt.x},${-pt.y} ` : `L${pt.x},${-pt.y} `;
+                        if (series.datapoints) {
+                            addInteractivePoint(pt, j, series, item, series.color);
+                        }
+                        j++;
+                    }
+                    // #endregion
+                }
+                wipeExceedingPoints();
+            }
+            path.setAttribute('d', d);
+            pathFill.setAttribute('d', d + `V${(-minY * normY)} H0 Z`);
+            // tick
+            iter++;
+        }
+        // remove exceeding series
+        this._wipe(chartFillSeries, iter);
+        this._wipe(chartSeries, iter);
+        const w0 = 100 * stretch, h0 = 100 + 2 * normPadding, x0 = 0, //minX * normX,
+        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());
+        // #endregion
+        // #region grid
+        chartGrid.setAttribute('viewBox', `0 0 ${size.width} ${size.height}`);
+        if (grid.x.length <= 1 || grid.y.length <= 1) {
+            for (let j = chartGrid.children.length - 1; j >= 0; j--) {
+                chartGrid.children.item(j).remove();
+            }
+            return;
+        }
+        let pgrid;
+        if (chartGrid.children.length > 0) {
+            pgrid = chartGrid.children.item(0);
+        }
+        else {
+            pgrid = document.createElementNS(SVG_NS, 'path');
+            chartGrid.appendChild(pgrid);
+        }
+        const tick = padding * .25;
+        let lblCounter = 0;
+        let ensureLabel = (index, x, y, txt) => {
+            const ndx = index + /* <path> is the first child element */ 1;
+            let lbl;
+            if (chartGrid.children.length <= ndx) {
+                lbl = document.createElementNS(SVG_NS, 'text');
+                chartGrid.appendChild(lbl);
+            }
+            else {
+                lbl = chartGrid.children.item(ndx);
+            }
+            lbl.textContent = txt;
+            lbl.setAttribute('x', x.toString());
+            lbl.setAttribute('y', y.toString());
+            return lbl;
+        };
+        let dgrid = `M${paddingYAxis},${padding} v${gridHeight}`; //H${w}
+        // x
+        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++;
+            }
+        }
+        // y
+        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);
+        // exceeding labels?
+        for (let j = chartGrid.children.length - 1; j > lblCounter; j--) {
+            chartGrid.children.item(j).remove();
+        }
+        // #endregion
+        // #region abscissa cursor
+        // #endregion
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemChartElement.prototype, "type", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemChartElement.prototype, "aspectRatio", void 0);
+PacemChartElement = __decorate([
+    CustomElement({ tagName: P + '-chart' })
+], PacemChartElement);
+export { PacemChartElement };

package/dist/esm/index-components-charts.js

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './generic';
+export * from './column';
+export * from './pie';

package/dist/esm/index-components.js

@@ -0,0 +1 @@
+export * as Charts from './index-components-charts';

package/dist/esm/index-iife.js

@@ -0,0 +1,3 @@
+import { DeepMerger } from '@pacem/pacem-foundation';
+import * as Output from './index';
+DeepMerger.merge(Output);

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * as Components from './index-components';