axidio-styleguide-library1-v2 0.2.6 → 0.2.7

package/fesm2022/axidio-styleguide-library1-v2.mjs

@@ -3002,8 +3002,8 @@ class GuageChartComponent extends ComponentUniqueId {
         this.chartConfiguration = {};
         this.dataType = '';
         this.datatype_status = false;
-        this.isHeaderVisible = true;
         this.uniqueId = this.getUniqueId();
+        this.isHeaderVisible = true;
         this.defaultConfiguration = {
             margin: { top: 40, right: 20, bottom: 20, left: 20 },
             minAngle: -90,
@@ -3041,158 +3041,189 @@ class GuageChartComponent extends ComponentUniqueId {
     ngOnChanges() {
         this.redrawChart();
     }
-    onResized(_) {
+    onResized(_event) {
         this.redrawChart();
     }
+    /**
+     * Clears the previous SVG and redraws chart
+     */
     redrawChart() {
-        d3.select(`#${this.uniqueId}`).remove();
-        this.initializeChartConfig();
-        this.drawGaugeChart();
+        d3.select('#' + this.uniqueId).remove();
+        this.initializeLineChart();
+    }
+    /**
+     * Main entry point for chart rendering
+     */
+    initializeLineChart() {
+        this.prepareConfiguration();
+        const { data, metaData, colorMaps, data_ready, angleValue, radius } = this.processChartData();
+        const svg = this.createSvgContainer(radius);
+        this.drawArcs(svg, data_ready, colorMaps, metaData);
+        this.drawPointer(svg, metaData, data_ready, radius);
+        this.drawLabels(svg, data_ready, radius, metaData);
+        this.drawTexts(svg, metaData, radius);
     }
-    initializeChartConfig() {
+    /**
+     * Prepare chart configuration
+     */
+    prepareConfiguration() {
         for (const key in this.defaultConfiguration) {
             this.chartConfiguration[key] = ChartHelper.getValueByConfigurationType(key, this.defaultConfiguration, this.customChartConfiguration);
         }
-        if (this.chartConfiguration.isHeaderVisible !== undefined) {
+        if (this.chartConfiguration.isHeaderVisible !== undefined)
             this.isHeaderVisible = this.chartConfiguration.isHeaderVisible;
-        }
+    }
+    /**
+     * Process data, calculate colors and angles
+     */
+    processChartData() {
         const metaData = this.chartData.metaData;
+        const data = this.chartData.data;
+        const colorType = metaData.colorType || 'high';
+        const colorMaps = colorType === 'low'
+            ? this.chartConfiguration.low_colorMap
+            : this.chartConfiguration.high_colorMap;
         if (metaData.dataType) {
             this.dataType = metaData.dataType === 'USD' ? '$ ' : metaData.dataType;
-            this.datatype_status = metaData.dataType === 'USD';
+            this.datatype_status = true;
         }
+        const data_ready = data.slice(0, -1).map((v, i) => data[i + 1] - v);
+        const total = d3.sum(data_ready);
+        const angleValue = data_ready.reduce((acc, curr, i) => {
+            const prev = acc[i - 1] || 0;
+            acc.push(prev + (curr / total) * 180);
+            return acc;
+        }, []);
+        const width = parseInt(d3.select(this.containerElt.nativeElement).style('width')) -
+            this.chartConfiguration.margin.left -
+            this.chartConfiguration.margin.right;
+        const height = parseInt(d3.select(this.guagecontainerElt.nativeElement).style('height')) -
+            this.chartConfiguration.margin.top -
+            this.chartConfiguration.margin.bottom -
+            56;
+        const radius = Math.min(width, height) / 2;
+        return { data, metaData, colorMaps, data_ready, angleValue, radius };
     }
-    drawGaugeChart() {
-        const { data, metaData } = this.chartData;
-        const colorMaps = metaData.colorType === 'low'
-            ? this.chartConfiguration.low_colorMap
-            : this.chartConfiguration.high_colorMap;
-        const chartContainer = d3.select(this.containerElt.nativeElement);
-        const guagecontainer = d3.select(this.guagecontainerElt.nativeElement);
+    /**
+     * Create SVG base container
+     */
+    createSvgContainer(radius) {
         const margin = this.chartConfiguration.margin;
-        const width = parseInt(chartContainer.style('width')) - margin.left - margin.right;
-        const height = parseInt(guagecontainer.style('height')) - margin.top - margin.bottom - 56;
-        const svg = this.createSvg(chartContainer, width, height);
-        const radius = Math.min(width, height) / 2;
-        this.adjustForScreenAndDrilldown(radius);
-        const { data_ready, angleValue, labelArray, range } = this.prepareGaugeData(data);
-        this.drawArcs(svg, data_ready, angleValue, radius, colorMaps, metaData);
-        this.drawPointer(svg, radius, data, metaData);
-        this.drawLabels(svg, radius, labelArray, range, metaData);
-        this.drawCenterTexts(svg, radius, metaData);
-        this.alignSvg(svg, chartContainer, margin);
-    }
-    createSvg(chartContainer, width, height) {
-        return chartContainer
+        const chartContainer = d3.select(this.containerElt.nativeElement);
+        const width = parseInt(chartContainer.style('width'));
+        const height = parseInt(chartContainer.style('height'));
+        const svg = chartContainer
             .append('svg')
             .attr('id', this.uniqueId)
             .attr('width', width)
             .attr('height', height)
             .call(ChartHelper.responsivefy)
-            .append('g');
-    }
-    adjustForScreenAndDrilldown(radius) {
-        if (this.chartConfiguration.isDrilldownChart) {
-            this.chartConfiguration.currentValueWidthScaleFactor += 40;
-            this.chartConfiguration.currentValueHeightScaleFactor += 20;
-        }
-        else if (window.innerWidth > 1400) {
-            this.chartConfiguration.currentValueHeightScaleFactor += 15;
-            this.chartConfiguration.currentValueWidthScaleFactor *= 2;
-        }
-    }
-    prepareGaugeData(data) {
-        const data_ready = data.slice(1).map((d, i) => d - data[i]);
-        const total = data_ready.reduce((a, b) => a + b, 0);
-        const angleValue = data_ready.map(((sum) => (unit) => (sum += (unit / total) * 180))(0));
-        const labelArray = [{ name: data[0], value: 0 }];
-        data_ready.reduce((acc, val, i) => {
-            const next = acc + val;
-            labelArray.push({ name: data[i + 1], value: next });
-            return next;
-        }, 0);
-        const range = data[data.length - 1] - data[0];
-        return { data_ready, angleValue, labelArray, range };
+            .append('g')
+            .attr('transform', `translate(${margin.left + radius}, ${margin.top + radius})`);
+        return svg;
     }
-    drawArcs(svg, data_ready, angleValue, radius, colorMaps, metaData) {
+    /**
+     * Draw gauge arcs
+     */
+    drawArcs(svg, data_ready, colorMaps, metaData) {
         const arc = d3
             .arc()
-            .innerRadius(radius - this.chartConfiguration.ringWidth - this.chartConfiguration.ringInset)
-            .outerRadius(radius)
-            .startAngle((_, i) => this.deg2rad(i === 0 ? this.chartConfiguration.minAngle : this.chartConfiguration.minAngle + angleValue[i - 1]))
-            .endAngle((_, i) => this.deg2rad(i === data_ready.length - 1
-            ? this.chartConfiguration.maxAngle
-            : this.chartConfiguration.minAngle + angleValue[i]));
-        const arcs = svg.append('g').attr('class', 'arc').attr('transform', `translate(${radius},${radius})`);
-        arcs
+            .innerRadius(this.chartConfiguration.ringWidth +
+            this.chartConfiguration.ringInset -
+            20)
+            .outerRadius(this.chartConfiguration.ringWidth + 40)
+            .startAngle((_, i) => this.deg2rad(this.chartConfiguration.minAngle + (i ? i * 60 : 0)))
+            .endAngle((_, i) => this.deg2rad(this.chartConfiguration.minAngle + (i + 1) * 60));
+        const isClickable = metaData.hasDrillDown && metaData.currentValue > 0;
+        svg
+            .append('g')
+            .attr('class', 'arc')
             .selectAll('path')
             .data(data_ready)
             .enter()
             .append('path')
             .attr('fill', (_, i) => colorMaps[i])
             .attr('d', arc)
-            .style('cursor', () => metaData.currentValue > 0 && metaData.hasDrillDown ? 'pointer' : 'default')
+            .style('cursor', isClickable ? 'pointer' : 'default')
             .on('click', (event, d) => {
-            if (metaData.hasDrillDown && metaData.currentValue > 0) {
-                this.handleClick(this.getRange(d, data_ready, metaData));
-            }
+            if (isClickable)
+                this.handleClick(d);
         });
     }
-    drawPointer(svg, radius, data, metaData) {
+    /**
+     * Draw the pointer/needle
+     */
+    drawPointer(svg, metaData, data_ready, radius) {
+        const pointerValue = metaData.currentValue - this.chartData.data[0];
+        const range = this.chartData.data[this.chartData.data.length - 1] -
+            this.chartData.data[0];
+        const pointerAngle = this.chartConfiguration.minAngle + (pointerValue / range) * 180;
         const pointerHeadLength = Math.round(radius * this.chartConfiguration.pointerHeadLengthPercent);
         const lineData = [
             [this.chartConfiguration.pointerWidth / 2, 0],
             [0, -pointerHeadLength],
-            [-(this.chartConfiguration.pointerWidth / 2), 0],
+            [-this.chartConfiguration.pointerWidth / 2, 0],
             [0, this.chartConfiguration.pointerTailLength],
             [this.chartConfiguration.pointerWidth / 2, 0],
         ];
-        const pointerLine = d3.line();
-        const pointerValue = metaData.currentValue - data[0];
-        const range = data[data.length - 1] - data[0];
-        const pointerAngle = this.chartConfiguration.minAngle + (pointerValue / range) * 180;
         svg
             .append('g')
-            .data([lineData])
             .attr('class', 'pointer')
-            .attr('transform', `translate(${radius},${radius})`)
             .append('path')
-            .attr('d', pointerLine)
+            .attr('d', d3.line()(lineData))
             .attr('fill', this.chartConfiguration.pointerColor)
-            .attr('transform', `rotate(${pointerAngle}) translate(0,${-radius + this.chartConfiguration.ringWidth + pointerHeadLength})`);
+            .attr('transform', `rotate(${pointerAngle}) translate(0, ${-radius +
+            this.chartConfiguration.ringWidth +
+            pointerHeadLength})`);
     }
-    drawLabels(svg, radius, labelArray, range, metaData) {
-        const lg = svg.append('g').attr('class', 'label').attr('transform', `translate(${radius},${radius})`);
-        const labelGroups = lg
-            .selectAll('.bubble')
+    /**
+     * Draw numeric labels around gauge
+     */
+    drawLabels(svg, data_ready, radius, metaData) {
+        const data = this.chartData.data;
+        const range = data[data.length - 1] - data[0];
+        const labelArray = [{ name: data[0], value: 0 }];
+        data_ready.reduce((sum, val, i) => {
+            const newSum = sum + val;
+            labelArray.push({ name: data[i + 1], value: newSum });
+            return newSum;
+        }, 0);
+        const labelGroup = svg.append('g').attr('class', 'labels');
+        labelGroup
+            .selectAll('text')
             .data(labelArray)
             .enter()
-            .append('g')
-            .attr('transform', (d) => {
-            const angle = this.chartConfiguration.minAngle + (d.value / range) * 180;
-            return `rotate(${angle}) translate(0,${this.chartConfiguration.labelInset - radius - 20})`;
-        });
-        labelGroups
             .append('text')
+            .attr('transform', (d) => {
+            const newAngle = this.chartConfiguration.minAngle + (d.value / range) * 180;
+            return `rotate(${newAngle}) translate(0, ${this.chartConfiguration.labelInset - radius - 20})`;
+        })
             .attr('fill', 'var(--chart-text-color)')
-            .style('font-size', window.innerWidth < 1400 ? '12px' : '14px')
+            .style('font-size', '14px')
             .style('font-weight', '600')
-            .text((d) => `${d.name}${metaData.dataType || ''}`);
+            .text((d) => metaData.dataType ? `${d.name}${metaData.dataType}` : d.name);
     }
-    drawCenterTexts(svg, radius, metaData) {
+    /**
+     * Draw texts (value, status, date)
+     */
+    drawTexts(svg, metaData, radius) {
+        const topY = radius / 2 - 10;
+        const midY = topY + this.chartConfiguration.currentValueHeightScaleFactor;
+        const bottomY = midY + this.chartConfiguration.currentValueHeightScaleFactor;
         svg
             .append('foreignObject')
-            .attr('transform', `translate(${radius - this.chartConfiguration.currentValueWidthScaleFactor / 2},${radius / 2 - 10})`)
-            .attr('width', this.chartConfiguration.currentValueWidthScaleFactor)
-            .attr('height', this.chartConfiguration.currentValueHeightScaleFactor)
+            .attr('transform', `translate(${radius - 50}, ${topY})`)
+            .attr('width', 100)
+            .attr('height', 40)
             .append('xhtml:div')
             .attr('class', 'value-display')
             .html(`${metaData.currentValue}${metaData.dataType || ''}`);
         if (metaData.status) {
             svg
                 .append('foreignObject')
-                .attr('transform', `translate(${radius - 60},${radius / 2 + 20})`)
+                .attr('transform', `translate(${radius - 60}, ${midY})`)
                 .attr('width', 120)
+                .attr('height', 40)
                 .append('xhtml:div')
                 .attr('class', 'status-display')
                 .html(metaData.status);
@@ -3200,22 +3231,15 @@ class GuageChartComponent extends ComponentUniqueId {
         if (metaData.dateRange) {
             svg
                 .append('foreignObject')
-                .attr('transform', `translate(${radius - 105},${radius / 2 + 50})`)
+                .attr('transform', `translate(${radius - 105}, ${bottomY})`)
                 .attr('width', 210)
+                .attr('height', 40)
                 .append('xhtml:div')
                 .attr('class', 'daterange-display')
                 .html(`<span class="marginright-3"><i class="fa fa-calendar"></i></span>${metaData.dateRange}`);
         }
     }
-    alignSvg(svg, chartContainer, margin) {
-        const containerMid = parseInt(chartContainer.style('width')) / 2;
-        const nodeHalf = svg.node().getBoundingClientRect().width / 2;
-        svg.attr('transform', `translate(${containerMid - nodeHalf + margin.left},${margin.top})`);
-    }
-    getRange(d, data_ready, metaData) {
-        const data = this.chartData.data;
-        return `${data[0]} and ${data[data.length - 1]}`;
-    }
+    /** Convert degrees to radians */
     deg2rad(deg) {
         return (deg * Math.PI) / 180;
     }