@pacem/pacem-charts 1.0.0-abel

package/dist/esm/pie.js

@@ -0,0 +1,306 @@
+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, Utils, CustomElementUtils, Debounce } from '@pacem/pacem-core';
+import { MANAGED_EVENTS } from './types';
+//namespace Pacem.Components.Charts {
+let PacemPieSliceElement = class PacemPieSliceElement extends Components.PacemItemElement {
+    constructor() {
+        super(...arguments);
+        this._broadcastHandler = (e) => {
+            this.emit(e);
+        };
+    }
+    findContainer() {
+        return CustomElementUtils.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 (Utils.isNull(area)) {
+            return null;
+        }
+        const rect = Utils.offset(area), center = { x: rect.width / 2 + rect.left, y: rect.top + rect.height / 2 }, r = Math.min(rect.width, rect.height) * .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 (!Utils.isNull(this._ui)) {
+            MANAGED_EVENTS.forEach(type => {
+                this._ui.removeEventListener(type, this._broadcastHandler);
+            });
+        }
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Number })
+], PacemPieSliceElement.prototype, "value", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemPieSliceElement.prototype, "label", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemPieSliceElement.prototype, "color", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Json })
+], PacemPieSliceElement.prototype, "normalizedPolarCoords", void 0);
+PacemPieSliceElement = __decorate([
+    CustomElement({ tagName: P + '-pie-slice' })
+], PacemPieSliceElement);
+export { PacemPieSliceElement };
+const TWO_PI = Math.PI * 2;
+const PI1_2 = Math.PI * .5;
+let PacemPieChartElement = class PacemPieChartElement extends Components.PacemItemsContainerElement {
+    constructor() {
+        super();
+        /** Set a value between 0 and 1, for doughnut appearance. */
+        this.cutout = .0;
+        /** Distance between two consecutive slices, in pixels. */
+        this.slicePadding = .0;
+        this._slices = new WeakMap();
+        this._key = Utils.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(PCSS + '-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 (Utils.isNull(this._g)) {
+            let div = this.target || (this._div = document.createElement('div'));
+            div.classList.add(PCSS + '-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.style.height =
+            //    svg.style.width = '100%';
+            svg.classList.add(PCSS + '-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 (Utils.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.0 * this._safeCutout;
+            this._mask.setAttribute('r', `${cutout}`);
+        }
+        else {
+            if (!Utils.isNull(this._mask)) {
+                this._svg.firstElementChild.innerHTML = '';
+                this._mask = null;
+                this._g.removeAttribute('mask');
+            }
+        }
+        // has padded slices?
+        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 (Utils.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 > .5 * whole ? 1 : 0;
+        const angle = TWO_PI * slice.value / whole;
+        const rot = 360.0 * partial / whole;
+        const x = (slice.value >= whole) ? /* handling single slice */ 49.9 : 50 * (1 + Math.sin(angle));
+        const y = 50 * (1 - Math.cos(angle));
+        // set geometry data
+        const c = this._safeCutout, r = c * 50.0;
+        path.style.fill = slice.color; //.setAttribute('fill', slice.color || (path.getAttribute('fill') || '#000'));
+        //path.setAttribute('transform', `rotate(${rot} 50 50)`);
+        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.0 - c)},${(50 - y) * (1.0 - c)} A${r},${r} 0 ${largeFlag} 0 50,${(50 - r)} Z`;
+        path.setAttribute('d', d);
+        slice.normalizedPolarCoords = { radius: c + Math.SQRT1_2 * (1.0 - c), angle: /* deg to rad */ Math.PI * rot / 180.0 + angle / 2 };
+    }
+    _isSliceOk(slice) {
+        return !slice.disabled //&& slice.value > 0
+        ;
+    }
+    _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 (Utils.isNullOrEmpty(this.items)) {
+            g.innerHTML = '';
+            Utils.removeClass(chartArea, 'chart-has-data');
+        }
+        else {
+            Utils.addClass(chartArea, 'chart-has-data');
+            for (let slice of this.items) {
+                if (!this._isSliceOk(slice)) {
+                    continue;
+                }
+                sum += slice.value;
+            }
+            if (sum <= 0) {
+                g.innerHTML = '';
+                Utils.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 ' + PCSS + '-pie-slice' + (Utils.isNullOrEmpty(slice.className) ? '' : (' ' + slice.className)));
+                        p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                        g_n.appendChild(p);
+                        g.appendChild(g_n);
+                        // add listeners (click, mouse-..., touch-...)
+                        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);
+            // remove listeners
+            if (slices.has(g_n)) {
+                slices.get(g_n)._disposeUi();
+                slices.delete(g_n);
+            }
+            g.removeChild(g_n);
+        }
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Number })
+], PacemPieChartElement.prototype, "cutout", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Element })
+], PacemPieChartElement.prototype, "target", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemPieChartElement.prototype, "maskBasedRendering", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Number })
+], PacemPieChartElement.prototype, "slicePadding", void 0);
+__decorate([
+    Debounce(true)
+], PacemPieChartElement.prototype, "draw", null);
+PacemPieChartElement = __decorate([
+    CustomElement({ tagName: P + '-pie-chart' })
+], PacemPieChartElement);
+export { PacemPieChartElement };