chuijs 3.6.2 → 3.6.4

package/framework/components/chui_graphs/graphs.js

@@ -1,190 +1,234 @@
-let { Notification } = require('../chui_notification/notification')
-
-class BarGraph {
-    #canvas = document.createElement('canvas');
-    #options = undefined;
-    constructor(options) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Canvas');
-        this.#options = options;
-        let colors = options.colors;
-        let data_lenght = 0;
-        let datz = [];
-        let labelz = [];
-        for (let test in this.#options.data) {
-            data_lenght++;
-            datz.push(this.#options.data[test]);
-            labelz.push(test);
-        }
-        let height = Math.max.apply(null, datz);
-        height =  height / 100;
-        height = Math.ceil(height) * 100;
-        let zz = 4;
-        let width = (150 * data_lenght) - 75;
-        let max = height;
-        this.#canvas.setAttribute("width", width+70);
-        this.#canvas.setAttribute("height", height+70);
-        let ctx = this.#canvas.getContext('2d');
-
-        ctx.strokeStyle = '#8e8e93'
-        ctx.lineWidth = 1.5;
-        ctx.beginPath(); 
-        ctx.moveTo(35, 35); 
-        ctx.lineTo(35, height + 35);
-        ctx.lineTo(width + 35, height + 35);
-        ctx.stroke();
-        
-        let shag = max / zz;
-
-        ctx.fillStyle = "#8e8e93";
-        let test = (height + 35) / shag + 1;
-        for(let i = 0; i < test; i++) {
-            let testzz = i * shag;
-            if (testzz < max || testzz === max) {
-                ctx.font = `bold 14px Arial`;
-                ctx.textBaseline = 'middle';
-                ctx.fillText(testzz, 0, (height + 35 - i * shag)); 
-                ctx.beginPath(); 
-                ctx.moveTo(35, height + 35 - i * shag);
-                ctx.lineTo(30, height + 35 - i * shag);
-                ctx.stroke();
-            }
-        }
-
-        let i = 0;
-        for (test in this.#options.data) {
-            ctx.font = `bold 14px Arial`;
-            ctx.fillText(test, 35 + i * 150, height + 60);
-            i++;
-        }
-
-        
-        let rects = [];
-        i = 0;
-        for (test in this.#options.data) {
-            let dp = this.#options.data[test];
-            rects.push({x: 35 + i * 150, y: height + 35 - dp, w: 75, h: dp})
-            i++;
-        }
-        i = 0;
-        let r;
-        while(r = rects[i++]) {
-            ctx.fillStyle = `${colors[i-1]}`;
-            ctx.fillRect(r.x, r.y, r.w, r.h);
-        }        
-
-        this.#canvas.onclick = function(e) {
-            let rect = this.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top, i = 0, r;
-            while(r = rects[i++]) {
-                ctx.fillStyle = `${colors[i-1]}`;
-                ctx.beginPath();
-                ctx.rect(r.x, r.y, r.w, r.h);
-                if (ctx.isPointInPath(x, y)) {
-                    new Notification(`${labelz[i-1]} [${datz[i-1]}]`).show();
-                    ctx.fillStyle = ctx.isPointInPath(x, y) ? "#1676f3" : "#1676f3";
-                }
-                ctx.closePath();
-                ctx.fill();
-            }
-        };
-    }
-    set() {
-        return this.#canvas;
-    }
-}
-
-class PieGraph {
-    #chui_piechart = document.createElement('chui_piechart');
-    #canvas = document.createElement('canvas');
-    #options = undefined;
-    #ctx = this.#canvas.getContext("2d");
-    #colors = undefined;
-    constructor(options) {
-        
-        this.#canvas.width = 400;
-        this.#canvas.height = 400;
-        this.#options = options;
-        
-        this.#colors = options.colors;
-
-        let total_value = 0;
-        let color_index = 0;
-        for (let categ in this.#options.data){
-            let val = this.#options.data[categ];
-            total_value += val;
-        }
-
-        let start_angle = 0;
-        for (let categ in this.#options.data){
-            let val = this.#options.data[categ];
-            let slice_angle = 2 * Math.PI * val / total_value;
- 
-            drawPieSlice(
-                this.#ctx,
-                this.#canvas.width/2,
-                this.#canvas.height/2,
-                Math.min(this.#canvas.width/2,this.#canvas.height/2),
-                start_angle,
-                start_angle+slice_angle,
-                this.#colors[color_index%this.#colors.length]
-            );
- 
-            start_angle += slice_angle;
-            color_index++;
-        }
-        /*if (this.#options.doughnutHoleSize){
-            drawPieSlice(
-                this.#ctx,
-                this.#canvas.width/2,
-                this.#canvas.height/2,
-                this.#options.doughnutHoleSize * Math.min(this.#canvas.width/2,this.#canvas.height/2),
-                0,
-                2 * Math.PI,
-                "rgba(0, 0, 200, 0.5)"
-            );
-        }*/
-        start_angle = 0;
-        for (let categ in this.#options.data){
-            let val = this.#options.data[categ];
-            let slice_angle = 2 * Math.PI * val / total_value;
-            let pieRadius = Math.min(this.#canvas.width / 2, this.#canvas.height / 2);
-            let offset = (pieRadius * 0.3) / 2;
-            let labelX = this.#canvas.width / 2 + (offset + pieRadius / 2) * Math.cos(start_angle + slice_angle / 2);
-            let labelY = this.#canvas.height / 2 + (offset + pieRadius / 2) * Math.sin(start_angle + slice_angle / 2);
-            let labelText = Math.round(100 * val / total_value);
-            this.#ctx.fillStyle = "white";
-            this.#ctx.font = "bold 17px Arial";
-            this.#ctx.fillText(`${labelText}%`, labelX, labelY+10);
-            start_angle += slice_angle;
-        }
-        let legends = document.createElement('legends');
-        if (this.#options.legend){
-            color_index = 0;
-            for (let categ in this.#options.data){
-                let legend = document.createElement('legend');
-                let color = document.createElement('legend_color');
-                let label = document.createElement('legend_label');
-                color.style.background = `${this.#colors[color_index++]}`;
-                label.innerHTML = categ;
-                legend.appendChild(color);
-                legend.appendChild(label);
-                legends.appendChild(legend);
-            }
-        }
-        this.#chui_piechart.appendChild(this.#canvas);
-        this.#chui_piechart.appendChild(legends);
-    }
-    set() {
-        return this.#chui_piechart;
-    }
-}
-function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color) {
-    ctx.fillStyle = color;
-    ctx.beginPath();
-    ctx.moveTo(centerX , centerY);
-    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
-    ctx.closePath();
-    ctx.fill();
-}
-
-exports.BarGraph = BarGraph;
-exports.PieGraph = PieGraph;
+const { Notification } = require('../chui_notification/notification');
+const { setStyles } = require('../../modules/chui_functions');
+
+const STYLES_ID = 'chUiJS_Canvas';
+const AXIS_COLOR = '#8e8e93';
+const LABEL_FONT = 'bold 14px Arial';
+const Y_AXIS_STEPS = 4;
+const PLOT_HEIGHT = 240;
+const CATEGORY_WIDTH = 150;
+const BAR_WIDTH = 75;
+const BAR_FALLBACK_COLOR = '#1676f3';
+const PADDING = { top: 20, right: 20, bottom: 50, left: 50 };
+const PIE_SIZE = 400;
+
+/** Подбирает «круглый» масштаб оси: максимум и шаг между делениями. */
+function getAxisScale(maxValue) {
+    if (!(maxValue > 0)) return { max: Y_AXIS_STEPS, step: 1 };
+    const rawStep = maxValue / Y_AXIS_STEPS;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
+    const step = Math.ceil(rawStep / magnitude) * magnitude;
+    return { max: step * Y_AXIS_STEPS, step: step };
+}
+
+/** Форматирует подпись оси без лишних нулей после запятой. */
+function formatAxisLabel(value) {
+    return Number(value.toFixed(2)).toString();
+}
+
+/** Приводит canvas к физическому разрешению экрана, сохраняя рисование в CSS-пикселях. */
+function prepareCanvas(canvas, cssWidth, cssHeight) {
+    const ratio = window.devicePixelRatio || 1;
+    canvas.width = cssWidth * ratio;
+    canvas.height = cssHeight * ratio;
+    canvas.style.width = cssWidth + 'px';
+    canvas.style.height = cssHeight + 'px';
+    const ctx = canvas.getContext('2d');
+    ctx.scale(ratio, ratio);
+    return ctx;
+}
+
+class BarGraph {
+    #canvas = document.createElement('canvas');
+    #options = undefined;
+    #bars = [];
+
+    constructor(options) {
+        setStyles(__dirname + '/styles.css', STYLES_ID);
+        this.#options = options;
+        this.#draw();
+        this.#bindPointer();
+    }
+
+    #draw() {
+        const data = this.#options.data || {};
+        const colors = this.#options.colors || [];
+        const labels = Object.keys(data);
+        const values = labels.map((label) => Number(data[label]) || 0);
+        const scale = getAxisScale(Math.max.apply(null, values.length ? values : [0]));
+
+        const plotWidth = labels.length * CATEGORY_WIDTH;
+        const cssWidth = PADDING.left + plotWidth + PADDING.right;
+        const cssHeight = PADDING.top + PLOT_HEIGHT + PADDING.bottom;
+        const ctx = prepareCanvas(this.#canvas, cssWidth, cssHeight);
+
+        this.#drawAxes(ctx, plotWidth, scale);
+        this.#drawBars(ctx, labels, values, scale, colors);
+    }
+
+    #drawAxes(ctx, plotWidth, scale) {
+        const originX = PADDING.left;
+        const originY = PADDING.top;
+        const bottomY = originY + PLOT_HEIGHT;
+
+        ctx.strokeStyle = AXIS_COLOR;
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(originX, originY);
+        ctx.lineTo(originX, bottomY);
+        ctx.lineTo(originX + plotWidth, bottomY);
+        ctx.stroke();
+
+        ctx.font = LABEL_FONT;
+        ctx.fillStyle = AXIS_COLOR;
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+        for (let i = 0; i <= Y_AXIS_STEPS; i++) {
+            const y = bottomY - (i / Y_AXIS_STEPS) * PLOT_HEIGHT;
+            ctx.fillText(formatAxisLabel(i * scale.step), originX - 6, y);
+            ctx.beginPath();
+            ctx.moveTo(originX, y);
+            ctx.lineTo(originX - 5, y);
+            ctx.stroke();
+        }
+    }
+
+    #drawBars(ctx, labels, values, scale, colors) {
+        const bottomY = PADDING.top + PLOT_HEIGHT;
+        this.#bars = [];
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        for (let i = 0; i < labels.length; i++) {
+            const barHeight = (values[i] / scale.max) * PLOT_HEIGHT;
+            const x = PADDING.left + i * CATEGORY_WIDTH + (CATEGORY_WIDTH - BAR_WIDTH) / 2;
+            const bar = { index: i, x: x, y: bottomY - barHeight, w: BAR_WIDTH, h: barHeight };
+            this.#bars.push(bar);
+
+            ctx.fillStyle = colors[i % colors.length] || BAR_FALLBACK_COLOR;
+            ctx.fillRect(bar.x, bar.y, bar.w, bar.h);
+
+            ctx.fillStyle = AXIS_COLOR;
+            ctx.fillText(labels[i], bar.x + bar.w / 2, bottomY + 10);
+        }
+    }
+
+    #bindPointer() {
+        this.#canvas.style.cursor = 'pointer';
+        this.#canvas.addEventListener('click', (event) => {
+            const bar = this.#findBar(event);
+            if (bar === null) return;
+            const data = this.#options.data || {};
+            const labels = Object.keys(data);
+            new Notification({
+                title: labels[bar.index],
+                text: String(data[labels[bar.index]]),
+                showTime: 3000,
+            }).show();
+        });
+    }
+
+    #findBar(event) {
+        const rect = this.#canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        for (let bar of this.#bars) {
+            if (x >= bar.x && x <= bar.x + bar.w && y >= bar.y && y <= bar.y + bar.h) return bar;
+        }
+        return null;
+    }
+
+    set() {
+        return this.#canvas;
+    }
+}
+
+class PieGraph {
+    #chui_piechart = document.createElement('chui_piechart');
+    #canvas = document.createElement('canvas');
+    #options = undefined;
+
+    constructor(options) {
+        setStyles(__dirname + '/styles.css', STYLES_ID);
+        this.#options = options;
+        const ctx = prepareCanvas(this.#canvas, PIE_SIZE, PIE_SIZE);
+        this.#drawSlices(ctx);
+        this.#chui_piechart.appendChild(this.#canvas);
+        if (options.legend) this.#chui_piechart.appendChild(this.#buildLegend());
+    }
+
+    #drawSlices(ctx) {
+        const data = this.#options.data || {};
+        const colors = this.#options.colors || [];
+        const labels = Object.keys(data);
+        const total = labels.reduce((sum, label) => sum + (Number(data[label]) || 0), 0);
+        if (total <= 0) return;
+
+        const center = PIE_SIZE / 2;
+        let startAngle = 0;
+        for (let i = 0; i < labels.length; i++) {
+            const value = Number(data[labels[i]]) || 0;
+            const sliceAngle = 2 * Math.PI * value / total;
+            drawPieSlice(ctx, center, center, center, startAngle, startAngle + sliceAngle, colors[i % colors.length]);
+            this.#drawPercentage(ctx, center, startAngle, sliceAngle, value, total);
+            startAngle += sliceAngle;
+        }
+        this.#drawDoughnutHole(ctx, center);
+    }
+
+    #drawPercentage(ctx, center, startAngle, sliceAngle, value, total) {
+        const labelRadius = center * 0.65;
+        const angle = startAngle + sliceAngle / 2;
+        ctx.fillStyle = 'white';
+        ctx.font = LABEL_FONT;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(`${Math.round(100 * value / total)}%`, center + labelRadius * Math.cos(angle), center + labelRadius * Math.sin(angle));
+    }
+
+    #drawDoughnutHole(ctx, center) {
+        const holeSize = this.#options.doughnutHoleSize;
+        if (!(holeSize > 0) || holeSize >= 1) return;
+        ctx.save();
+        ctx.globalCompositeOperation = 'destination-out';
+        ctx.beginPath();
+        ctx.arc(center, center, center * holeSize, 0, 2 * Math.PI);
+        ctx.closePath();
+        ctx.fill();
+        ctx.restore();
+    }
+
+    #buildLegend() {
+        const data = this.#options.data || {};
+        const colors = this.#options.colors || [];
+        const legends = document.createElement('legends');
+        let index = 0;
+        for (let label in data) {
+            const legend = document.createElement('legend');
+            const color = document.createElement('legend_color');
+            const text = document.createElement('legend_label');
+            color.style.background = colors[index % colors.length];
+            text.innerHTML = label;
+            legend.appendChild(color);
+            legend.appendChild(text);
+            legends.appendChild(legend);
+            index++;
+        }
+        return legends;
+    }
+
+    set() {
+        return this.#chui_piechart;
+    }
+}
+
+function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color) {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(centerX, centerY);
+    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
+    ctx.closePath();
+    ctx.fill();
+}
+
+exports.BarGraph = BarGraph;
+exports.PieGraph = PieGraph;

package/framework/components/chui_graphs/styles.css

@@ -1,33 +1,38 @@
-canvas {
-    "background": "var(--main_background)",
-    "height": "max-content",
-    "width": "max-content",
-    "border-radius": "var(--border_radius)",
-    "margin": "var(--margin)",
-}
-
-chui_piechart {
-    "display": "flex",
-    "align-items": "center",
-}
-
-legends {
-    "margin": "15px"
-}
-
-legend {
-    "display": "flex",
-    "align-items": "center",
-}
-
-legend_color {
-    "width": "20px",
-    "height": "20px",
-    "border-radius": "var(--border_radius)"
-}
-
-legend_label {
-    "color": "var(--text_color)",
-    "font-weight": "400",
-    "margin": "var(--margin)"
+canvas {
+    background: var(--element_background_2);
+    height: max-content;
+    width: max-content;
+    border-radius: var(--border_radius);
+    margin: var(--margin);
+}
+
+chui_piechart {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+legends {
+    display: flex;
+    flex-direction: column;
+    margin: 15px;
+}
+
+legend {
+    display: flex;
+    align-items: center;
+    margin: 2px 0;
+}
+
+legend_color {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    border-radius: var(--border_radius);
+}
+
+legend_label {
+    color: var(--text_color);
+    font-weight: 400;
+    margin: var(--margin);
 }

package/framework/components/chui_hero/hero.js

@@ -0,0 +1,98 @@
+const {Icon} = require("../chui_icons/icons");
+
+class Hero {
+    #chui_hero = document.createElement("chui_hero");
+    #head;
+    #badge;
+    #titles;
+    #title;
+    #description;
+    #stats;
+    constructor(options = {
+        id: String(),
+        title: String(),
+        description: String(),
+        icon: String(),
+        stats: [],
+        style: String(),
+        width: String(),
+        height: String()
+    }) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", 'chUiJS_Hero');
+        if (options.id !== undefined) this.#chui_hero.id = options.id;
+        if (options.style !== undefined) this.#chui_hero.classList.add(options.style);
+        if (options.width !== undefined) this.#chui_hero.style.width = options.width;
+        if (options.height !== undefined) this.#chui_hero.style.height = options.height;
+        if (options.icon !== undefined) this.setIcon(options.icon);
+        if (options.title !== undefined) this.setTitle(options.title);
+        if (options.description !== undefined) this.setDescription(options.description);
+        if (options.stats !== undefined) for (let stat of options.stats) this.addStat(stat.value, stat.label);
+    }
+    // GET
+    getId() { return this.#chui_hero.id; }
+    getTitle() { return this.#title === undefined ? "" : this.#title.innerText; }
+    getDescription() { return this.#description === undefined ? "" : this.#description.innerText; }
+    // SET
+    setId(id = String()) { this.#chui_hero.id = id; }
+    setStyle(style = String()) { this.#chui_hero.classList.add(style); }
+    setWidth(width = String()) { this.#chui_hero.style.width = width; }
+    setHeight(height = String()) { this.#chui_hero.style.height = height; }
+    setIcon(icon = String()) {
+        if (this.#badge === undefined) {
+            this.#badge = document.createElement("hero_badge");
+            this.#headNode().prepend(this.#badge);
+        }
+        this.#badge.innerHTML = new Icon(icon, "28px").getHTML();
+    }
+    setTitle(text = String()) {
+        if (this.#title === undefined) {
+            this.#title = document.createElement("hero_title");
+            this.#titlesNode().appendChild(this.#title);
+        }
+        this.#title.innerText = text;
+    }
+    setDescription(text = String()) {
+        if (this.#description === undefined) {
+            this.#description = document.createElement("hero_description");
+            this.#titlesNode().appendChild(this.#description);
+        }
+        this.#description.innerText = text;
+    }
+    // FUNCTIONS
+    addStat(value = String(), label = String()) {
+        let stat = document.createElement("hero_stat");
+        let stat_value = document.createElement("hero_stat_value");
+        let stat_label = document.createElement("hero_stat_label");
+        stat_value.innerText = value;
+        stat_label.innerText = label;
+        stat.append(stat_value, stat_label);
+        this.#statsNode().appendChild(stat);
+    }
+    clearStats() { this.#statsNode().innerHTML = ""; }
+    // Шапка и статистика создаются при первом обращении, шапка всегда стоит выше
+    #headNode() {
+        if (this.#head === undefined) {
+            this.#head = document.createElement("hero_head");
+            this.#chui_hero.prepend(this.#head);
+        }
+        return this.#head;
+    }
+    #titlesNode() {
+        if (this.#titles === undefined) {
+            this.#titles = document.createElement("hero_titles");
+            this.#headNode().appendChild(this.#titles);
+        }
+        return this.#titles;
+    }
+    #statsNode() {
+        if (this.#stats === undefined) {
+            this.#stats = document.createElement("hero_stats");
+            this.#chui_hero.appendChild(this.#stats);
+        }
+        return this.#stats;
+    }
+    // RENDER
+    set() { return this.#chui_hero; }
+}
+
+exports.Hero = Hero