@necrolab/dashboard 0.5.21 → 0.5.23

package/src/libs/tm-renderer/tm/renderer.js

@@ -0,0 +1,568 @@
+import BaseRenderer from "../base-renderer.js";
+import * as TMUtils from "./tm-utils.js";
+import * as utils from "../utils.js";
+import { getEventData, getSeatData, fetchBackgroundImage } from "./requests.js";
+
+class TMRenderer extends BaseRenderer {
+    constructor(eventId, options = {}) {
+        // Validate event ID
+        if (!options.country && !TMUtils.checkIfEventValid(eventId)) {
+            throw new Error("Invalid eventId!");
+        }
+
+        super(eventId, options);
+
+        this.config = this.getDefaultConfig();
+        this.highlighted = [];
+        this.pricemap = false;
+        this.pricemapData = null;
+        this._shapeToName = {};
+    }
+
+    setHighlightedSeats(placeIds, color = null) {
+        if (!this.highlighted) {
+            this.highlighted = [];
+        }
+
+        const seatsToAdd = (placeIds || []).map((id) => ({
+            id,
+            color: color || this.config.highlightedSeatColor,
+        }));
+
+        this.highlighted.push(...seatsToAdd);
+
+        if (this.config.renderRowBlocks && this.highlighted.length !== 0) {
+            this.config.renderRowBlocks = false;
+        }
+        return this;
+    }
+
+    setCustomConfig(config) {
+        this.config = {
+            ...this.config,
+            ...config,
+        };
+        if (this.config.renderRowBlocks && this.highlighted.length !== 0) {
+            this.config.renderRowBlocks = false;
+        }
+        return this;
+    }
+
+    async render() {
+        if (!this.storage) {
+            this.logger.Error("Cannot render without storage");
+            return false;
+        }
+
+        try {
+            const { svg, bgImg } = await this._render();
+            if (!svg) {
+                this.logger.Error(`Couldn't render ${this.eventId}`);
+                return false;
+            }
+            this.svg = svg;
+            this.bgImg = bgImg;
+            return true;
+        } catch (e) {
+            if (this.config.logFullError) {
+                this.logger.Error("Full error details:", e);
+            }
+            this.logger.Error(`Couldn't render ${this.eventId} ${e.message}`);
+            return false;
+        }
+    }
+
+    async renderSeatmap(priceData) {
+        this.pricemap = true;
+        this.pricemapData = priceData;
+        this.config.dontRenderSeats = true;
+        return this.render();
+    }
+
+    async _render() {
+        let data = await this.storage.getItem(`renderer.eventData.${this.eventId}`);
+        if (!data || !data?.pages?.[0]?.segments) {
+            data = await this.getEventData();
+            if (!data) {
+                this.logger.Error("Couldn't get event data");
+                return {};
+            }
+            await this.storage.setItem(`renderer.eventData.${this.eventId}`, data);
+        }
+
+        if (!data?.pages?.[0]?.images) {
+            this.logger.Error("Could not get event data");
+            return {};
+        }
+
+        this.bgImg = `https://mapsapi.tmol.io/maps/geometry/image/${
+            data.pages[0].images.find((i) => i.url.includes("/")).url
+        }?removeFilters=ISM_Shadow`;
+        const labels = data?.pages?.[0]?.segments
+            .map((seg) => {
+                return {
+                    shape: seg.id,
+                    name: seg.name,
+                    labels: seg.shapes[0]?.labels,
+                    generalAdmission: seg.shapes[0]?.mode === "GA_STANDING",
+                };
+            })
+            .flat(1);
+
+        // seats data - used cached if possible
+        let seats = await this.storage.getItem(`renderer.seatData.${this.eventId}`);
+        if (!seats) {
+            const seatData = await this.getSeatData();
+            seats = TMUtils.parseSeatData(seatData);
+            await this.storage.setItem(`renderer.seatData.${this.eventId}`, seats);
+        }
+
+        if (typeof seats === "string" && seats.startsWith("[")) seats = JSON.parse(seats);
+
+        // availablility data
+        let avSeats = [];
+        let availablilityData = {};
+        let stock = [];
+
+        stock?.forEach((s) => {
+            s?.seats?.forEach((seat) => avSeats.push(seat.placeId));
+            if (!availablilityData[s.section]) availablilityData[s.section] = 0;
+            if (s.generalAdmission) availablilityData[s.section] += s.available;
+            else availablilityData[s.section]++;
+        });
+
+        let usedSections = [];
+        const highlightedIds = this.highlighted.map((h) => h.id);
+        const highlightedSections = this.highlighted.map((h) => h.id.split("/")[0]);
+
+        seats = seats.map((seat) => {
+            const secIdentifier = seat.rowId?.split(":")?.[0] || seat.section;
+
+            if (highlightedSections.includes(seat.section) && !usedSections.includes(secIdentifier)) {
+                usedSections.push(secIdentifier);
+            }
+
+            if (highlightedIds.includes(seat.id) && !usedSections.includes(secIdentifier)) {
+                usedSections.push(secIdentifier);
+            }
+
+            const highlightedSeat = this.highlighted.find(
+                (h) => h.id === seat.id || h.id === `${seat.section}/${seat.row}/${seat.seat}`,
+            );
+
+            return {
+                ...seat,
+                available: avSeats.includes(seat.id),
+                highlighted: !!highlightedSeat,
+                highlightColor: highlightedSeat?.color || this.config.highlightedSeatColor,
+            };
+        });
+
+        const svg = this._makeSVG(data, labels, seats, this.bgImg, usedSections);
+
+        return {
+            svg,
+            bgImg: this.bgImg,
+        };
+    }
+
+    _renderPriceLegend(priceData) {
+        priceData = [
+            {
+                priceFrom: 65,
+                priceTo: 130,
+                color: "dd0000",
+            },
+            {
+                priceFrom: 167,
+                priceTo: 275,
+                color: "aa0",
+            },
+
+            {
+                priceFrom: 310,
+                priceTo: 450,
+                color: "00ff00",
+            },
+
+            {
+                priceFrom: 555,
+                priceTo: 778,
+                color: "00ff00",
+            },
+        ];
+
+        const legendBody = priceData
+            .map((price, i) => {
+                return (
+                    utils.createElement("circle", {
+                        cx: 10,
+                        cy: (i + 1) * 20 - 3,
+                        r: 6,
+                        fill: `#${price.color}`,
+                    }) +
+                    utils.createElement(
+                        "text",
+                        {
+                            style: "font-size:10px;font-family: sans-serif;opacity:0.8;font-weight:500",
+                            x: 20,
+                            y: (i + 1) * 20,
+                        },
+                        utils.createElement("tspan", {}, `$${price.priceFrom}-${price.priceTo}`),
+                    )
+                );
+            })
+            .join("");
+
+        return utils.createElement(
+            "g",
+            { transform: "scale(15) translate(0 0)" },
+            utils.createElement("rect", {
+                width: 100,
+                height: (priceData.length + 1) * 20 - 10,
+                rx: 5,
+                fill: "#ffffffbb",
+            }) + legendBody,
+        );
+    }
+
+    _renderPolygons(segments, usedSections) {
+        // make polygons
+        let svg = `<g>`;
+
+        if (this.pricemap) {
+            this.minSection = { min: 100000 };
+            this.maxSection = { max: 0 };
+            Object.values(this.pricemapData.stubhub).forEach((sec) => {
+                sec.min = TMUtils.getPrice(sec.min);
+                sec.max = TMUtils.getPrice(sec.max);
+                if (sec.min < this.minSection.min) this.minSection = sec;
+                if (sec.max > this.maxSection.max) this.maxSection = sec;
+            });
+        }
+
+        segments?.forEach((segment) => {
+            let secIdentifier = segment.id;
+
+            let color = "#fff";
+            if (segment.generalAdmission) color = this.config.nonAvGAColor;
+
+            const highlightedSection = this.highlighted.find((h) => h.id === segment.id || h.id === segment.name);
+
+            if (highlightedSection) {
+                color = highlightedSection.color || this.config.GAColor;
+            } else if (
+                !segment.generalAdmission &&
+                this.config.dontRenderUnusedSections &&
+                !usedSections.includes(secIdentifier)
+            ) {
+                color = this.config.grayedOutSection;
+            }
+
+            if (this.config.dontRenderSeats) color = this.config.grayedOutSection;
+            if (this.pricemap) {
+                const stub =
+                    this.pricemapData.stubhub?.[this._shapeToName?.[segment.id]] ||
+                    this.pricemapData.stubhub?.[segment.name];
+                if (stub) {
+                    color = utils.manipulateHexColor(this.minSection.min / stub.min, "#00ff00", "#ff0000");
+                }
+            }
+
+            const attrs = {
+                d: segment?.shapes[0]?.path,
+                fill: color,
+                stroke: "rgba(200, 210, 220, 0.6)",
+                "stroke-width": "1.2"
+            };
+
+            // Use white stroke for special modes
+            if (this.config.dontRenderUnusedSections || this.config.dontRenderSeats) {
+                attrs.stroke = "white";
+                attrs["stroke-width"] = "2";
+            }
+            if (this.config.includeDetailedAttributes) {
+                attrs.shape = segment.id;
+                attrs.name = segment.name;
+                if (segment.generalAdmission) attrs.generalAdmission = true;
+            }
+
+            svg += utils.createElement("path", attrs);
+        });
+        svg += `</g>`;
+        return svg;
+    }
+
+    _renderSeatDots(seats, usedSections) {
+        let svg = `<g>`;
+
+        let addedLast = [];
+        seats?.forEach((seat) => {
+            let color = seat.available ? this.config.seatColor : this.config.nonAvSeatColor;
+            if (seat.highlighted) {
+                color = seat.highlightColor || this.config.highlightedSeatColor;
+                seat.r = seat.r + this.config.increaseHighlightedSeatSize;
+            }
+
+            if (
+                (this.config.dontRenderSeats || this.config.dontRenderUnusedSections) &&
+                !usedSections.includes(seat.rowId?.split(":")?.[0] || seat.section)
+            )
+                return;
+
+            const attrs = {
+                cx: seat.x,
+                cy: seat.y,
+                r: seat.r,
+                fill: color,
+            };
+
+            if (this.config.includeDetailedAttributes) {
+                attrs.section = seat.section;
+                attrs.row = seat.row;
+                attrs.rowId = seat.rowId;
+                attrs.seat = seat.seat;
+                attrs.seatId = seat.seatId;
+            }
+
+            const renderDot =
+                ((this.config.dontRenderSeats || this.config.dontRenderUnusedSections) && !seat.highlighted) ||
+                !(this.config.dontRenderSeats || this.config.dontRenderUnusedSections) ||
+                !this.config.seatsAsPins;
+
+            if (renderDot) svg += utils.createElement("circle", attrs);
+            else {
+                if (!seat.highlighted) return;
+
+                const scaleBy = seat.r * 5;
+                const size = (scaleBy - seat.r) * 1.5;
+
+                attrs.x = seat.x - seat.r * 1.8;
+                attrs.y = seat.y - seat.r * 1.8;
+                attrs.width = size;
+                attrs.height = size;
+                attrs.viewBox = ["-10", "-10", scaleBy / 2, scaleBy / 2].join(" ");
+
+                addedLast.push(utils.createElement("svg", attrs, utils.pinIcon));
+            }
+        });
+        svg += addedLast.join("\n");
+        svg += `</g>`;
+        return svg;
+    }
+
+    _renderRowBlocks(seats, usedSections, shapeToName) {
+        let svg = `<g>`;
+
+        const rows = {};
+        seats.forEach((s) => {
+            if (
+                (this.config.dontRenderSeats || this.config.dontRenderUnusedSections) &&
+                !usedSections.includes(s.rowId?.split(":")?.[0] || s.section)
+            )
+                return;
+            if (!rows[s.rowId]) rows[s.rowId] = [];
+            rows[s.rowId].push(s);
+        });
+
+        Object.values(rows).forEach((rowSeats) => {
+            const s = rowSeats[0];
+            const start = `${s.x} ${s.y}`;
+
+            let color = this.config.nonAvSeatColor;
+
+            let path = "";
+            for (let i = 1; i < rowSeats.length; i++) {
+                const curr = rowSeats[i];
+                const last = rowSeats[i - 1];
+                path += `l ${Math.round(curr.x - last.x)} ${Math.round(curr.y - last.y)} `;
+            }
+
+            const attrs = {
+                "transform": `translate(${start})`,
+                "fill": "transparent",
+                "id": s.rowId,
+                "d": `M 0 0 ${path}`,
+                "stroke": "rgba(200, 210, 220, 0.8)",
+                "stroke-width": s.r * 2,
+            };
+
+            if (this.config.includeDetailedAttributes) {
+                attrs.section = s.section;
+                attrs.row = s.row;
+                attrs.sectionName = shapeToName[s.rowId.split(":")[0]].trim();
+            }
+            svg += utils.createElement("path", attrs);
+        });
+
+        svg += "</g>";
+        return svg;
+    }
+
+    _renderLabels(labels, data) {
+        let svg = `<g>`;
+        const styles = TMUtils.parseStyles(data?.pages?.[0]?.labelStyles);
+
+        labels?.forEach((rawLabel) => {
+            const GA = rawLabel.generalAdmission;
+            rawLabel.labels.forEach((label) => {
+                const rotate = `${label.angle * -1}, ${label.x}, ${label.y}`;
+
+                const attrs = {
+                    transform: `rotate(${rotate})`,
+                };
+
+                const style = [
+                    `font-family: ${this.config.font}`,
+                    `opacity: ${GA ? this.config.textOpacityOnGA : this.config.textOpacity}`,
+                ];
+
+                if (this.config.useBig) style.push("font-weight: 500");
+                if (!label.size) style.push(`font-size: ${styles[label.styleId].size}`);
+                else style.push(`font-size: ${label.size}`);
+                attrs.style = style.join(";");
+
+                const textElements = label.text
+                    .split("\r")
+                    .map((word, i) => {
+                        const tspanAttrs = {
+                            "text-anchor": "middle",
+                            "x": label.x,
+                            "y": label.y,
+                            "dy": `${i + 1}em`,
+                            "font-size": this.config.fontSize,
+                            "fill": GA ? this.config.labelColorOnGA : this.config.labelColor,
+                            "section": this.config.includeDetailedAttributes ? rawLabel.name : null,
+                            "shape": this.config.includeDetailedAttributes ? rawLabel.shape : null,
+                        };
+                        return utils.createElement("tspan", tspanAttrs, word);
+                    })
+                    .join("\n");
+
+                svg += utils.createElement("text", attrs, textElements);
+            });
+        });
+
+        svg += "</g>";
+
+        return svg;
+    }
+
+    _makeSVG(data, labels, seats, bgImg, usedSections) {
+        let svgBody = "";
+        const { width, height } = data.pages[0];
+
+        const viewbox = `0 0 ${width} ${height}`;
+        const attrs = {
+            "style": `background-image: url(&quot;${bgImg}&quot;)`,
+            "viewBox": viewbox,
+            "stroke-width": this.config.dontRenderSeats || this.config.dontRenderUnusedSections ? "10.0" : null,
+        };
+
+        svgBody += this._renderPolygons(data?.pages?.[0]?.segments, usedSections);
+
+        // make seats
+        this._shapeToName = {};
+        labels.forEach((l) => {
+            this._shapeToName[l.shape] = l.labels[0].text.replaceAll("\r", " ");
+        });
+
+        if (!this.config.dontRenderSeats) {
+            if (this.config.renderRowBlocks) svgBody += this._renderRowBlocks(seats, usedSections, this._shapeToName);
+            else svgBody += this._renderSeatDots(seats, usedSections);
+        }
+
+        // make labels
+        svgBody += this._renderLabels(labels, data);
+
+        if (this.pricemap) {
+            svgBody += this._renderPriceLegend({});
+        }
+
+        return utils.createElement("svg", attrs, svgBody);
+    }
+
+    async outputToSVG(path) {
+        if (!this.svg || !this.fs) {
+            this.logger.Error("No SVG data available or fs not initialized");
+            return this;
+        }
+        this.fs.writeFileSync(path, this.svg);
+        return this;
+    }
+
+    async _fetchSaveBgImage() {
+        const bgImgData = await this.fetchBackgroundImage();
+        const background = await this.sharp(bgImgData).png().resize(this.config.outputWidth).toBuffer();
+        await this.storage.setItem(`renderer.background.${this.eventId}`, background);
+        return background;
+    }
+
+    async _png() {
+        let background = await this.storage.getItem(`renderer.background.${this.eventId}`);
+        if (!background) {
+            try {
+                background = await this._fetchSaveBgImage();
+            } catch (e) {
+                this.logger.Error(e.message);
+            }
+        } else if (background) {
+            if (typeof background === "string" && background.startsWith("{")) background = JSON.parse(background);
+            background = Buffer.from(background);
+            const bgData = await this.sharp(background).metadata();
+            if (bgData.width !== this.config.outputWidth) {
+                this.config.outputWidth = bgData.width;
+            }
+        }
+
+        const svgBuffer = Buffer.from(this.svg);
+        const png = await this.sharp(svgBuffer).png().resize(this.config.outputWidth).toBuffer();
+
+        if (background) {
+            const foreground = await this.sharp(png).toBuffer();
+            return this.sharp(background).composite([
+                {
+                    input: foreground,
+                    gravity: "southeast",
+                },
+            ]);
+        } else return this.sharp(png);
+    }
+
+    async outputToPNG(filePath) {
+        if (!this.svg || !this.sharp) {
+            this.logger.Error("No SVG data available or sharp not initialized");
+            return this;
+        }
+        const s = await this._png();
+        await s.toFile(filePath);
+        return this;
+    }
+
+    async outputToPNGBuffer() {
+        if (!this.svg || !this.sharp) {
+            this.logger.Error("No SVG data available or sharp not initialized");
+            return Buffer.from([0x00]);
+        }
+        const s = await this._png();
+        return s.toBuffer();
+    }
+
+    // Request methods
+    async getEventData() {
+        return await getEventData(this.eventId, this.options.country, this.options.proxy, this.logger);
+    }
+
+    async getSeatData() {
+        return await getSeatData(this.eventId, this.options.country, this.options.proxy, this.logger);
+    }
+
+    async fetchBackgroundImage() {
+        if (!this.bgImg) {
+            throw new Error("Background image URL not available");
+        }
+        return await fetchBackgroundImage(this.bgImg, this.options.proxy, this.logger);
+    }
+}
+
+export default TMRenderer;

package/src/libs/tm-renderer/tm/requests.js

@@ -0,0 +1,47 @@
+import { getJsonDataWithHeaders, getBinaryDataWithHeaders } from "../request-utils.js";
+
+function buildTMEventDataUrl(eventId, country = null) {
+    const excluded = ["USA", "Canada", "United Kingdom", "Ireland", "New Zealand", "Australia"];
+
+    let url = `https://mapsapi.tmol.io/maps/geometry/3/event/${eventId}?systemId=HOST&useHostGrids=true&app=CCP&sectionLevel=true`;
+
+    if (country && !excluded.includes(country)) {
+        url = `https://mapsapi.tmol.io/maps/geometry/3/event/${eventId}?systemId=MFX&useHostGrids=true&app=CCP&sectionLevel=true&domain=${country}&app=PRD1741_ICCP-FE`;
+    }
+
+    return url;
+}
+
+function buildTMSeatDataUrl(eventId, country = null) {
+    const excluded = ["USA", "Canada",  "United Kingdom", "Ireland", "New Zealand", "Australia"];
+
+    let url = `https://mapsapi.tmol.io/maps/geometry/3/event/${eventId}/placeDetailNoKeys?useHostGrids=true&app=CCP&sectionLevel=true&systemId=HOST`;
+
+    if (country && !excluded.includes(country)) {
+        url = `https://mapsapi.tmol.io/maps/geometry/3/event/${eventId}/placeDetailNoKeys?useHostGrids=true&app=CCP&sectionLevel=true&systemId=MFX&domain=${country}&app=PRD1741_ICCP-FE`;
+    }
+
+    return url;
+}
+
+async function getEventData(eventId, country, proxy, logger) {
+    const url = buildTMEventDataUrl(eventId, country);
+    return await getJsonDataWithHeaders(url, {}, proxy, 0, logger);
+}
+
+async function getSeatData(eventId, country, proxy, logger) {
+    const url = buildTMSeatDataUrl(eventId, country);
+    return await getJsonDataWithHeaders(url, {}, proxy, 0, logger);
+}
+
+async function fetchBackgroundImage(bgImgUrl, proxy, logger) {
+    return await getBinaryDataWithHeaders(bgImgUrl, {}, proxy, 0, logger);
+}
+
+export {
+    getEventData,
+    getSeatData,
+    fetchBackgroundImage,
+    buildTMEventDataUrl,
+    buildTMSeatDataUrl,
+};

package/src/libs/tm-renderer/tm/tm-utils.js

@@ -0,0 +1,40 @@
+const parseStyles = (styles) => {
+    let mapping = {};
+    for (let style of styles || []) {
+        const css = `color: #${style.color}; font-size: ${style.size}px; `;
+        mapping[style.id] = style;
+        mapping[style.id].css = css;
+    }
+    return mapping;
+};
+
+const getDotsOfSegment = (seg, allSeats, r = 0, outer = null) => {
+    if (seg.placeSize) r = seg.placeSize;
+    if (seg.generalAdmission || !seg) return;
+    if (seg.segments) {
+        seg.segments.forEach((s) => getDotsOfSegment(s, allSeats, r, seg));
+        return;
+    }
+    seg?.placesNoKeys?.forEach((s) => {
+        allSeats.push({
+            id: s[0],
+            seat: s[1],
+            x: s[2],
+            y: s[3],
+            row: seg.name,
+            rowId: seg.id,
+            r: r / 2,
+            section: outer?.name,
+        });
+    });
+};
+
+const parseSeatData = (seatData) => {
+    let allSeats = [];
+    seatData?.pages?.[0]?.segments?.forEach((seg) => getDotsOfSegment(seg, allSeats));
+    return allSeats;
+};
+
+export { parseStyles, parseSeatData };
+export const getPrice = (p) => parseInt(p.replaceAll("$", "").replaceAll(",", ".").replaceAll(".", ""));
+export const checkIfEventValid = (eventId) => /^\w{16}$/.test(eventId);