Allow label function to return svg elements to be rendered as labels e.g. svg:text

[pzontrop]

I would like to create a gauge with an icon in the middle and the value below it. For the icon i have created a webfont and it does seem to render. However my tspans that i would like to use to have 2 lines are not rendered. I can actually see the full string (<tspan....)

testIcon(value: string): string {
     return '<tspan x="0" dy="1.2em"></tspan><tspan x="0" dy="1.2em">' + value + '</tspan>';
}

Is there any other way to have 2 lines in the middle of the gauge? Or am i missing something else?

[naikus]

Hi @pzontrop, The label function currently can only return plain text and not elements. The future version may have this functionality. Meanwhile you can label display via CSS and show whatever HTML in a div and place that div in the center of the gauge (e.g. via CSS transforms) and update the div in the label function

[Misiu]

@naikus I have similar need - I want to have 2 lines in label. I've done some research and I was able to pass that text element to function. To be backward compatible I'm checking number of parameters:

function updateGauge(theValue, frame) {
    var val = getValueInPercentage(theValue, min, limit),
        // angle = getAngle(val, 360 - Math.abs(endAngle - startAngle)),
        angle = getAngle(val, 360 - Math.abs(startAngle - endAngle)),
        // this is because we are using arc greater than 180deg
        flag = angle <= 180 ? 0 : 1;
    if (displayValue) {
        if (label.length === 1) {
            gaugeValueElem.textContent = label.call(opts, theValue);
        } else {
            label.call(opts, gaugeValueElem, theValue);
        }

    }
    gaugeValuePath.setAttribute(
        "d",
        pathString(radius, startAngle, angle + startAngle, flag)
    );
}

so now I can declare gaube like this:

var gauge1 = Gauge(document.getElementById("gauge1"), {
  max: 100,
  dialStartAngle: -90,
  dialEndAngle: -90.001,
  value: 20.5,
  label: function(item, value) {
    while (item.firstChild) {
      item.removeChild(item.firstChild);
    }
    var tspan1 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
    tspan1.textContent=Math.round(value * 100) / 100 + " °C";
    tspan1.setAttribute('x',50);
    tspan1.setAttribute('y',48);
    item.appendChild(tspan1);
    
    var tspan2 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
    tspan2.textContent="First";
    tspan2.setAttribute('x',50);
    tspan2.setAttribute('y',62);
    item.appendChild(tspan2);
  }
});

Not perfect but works just fine :) Here is my working demo: https://codepen.io/Misiu/pen/oEmVWw

Is there a chance this could be added?

[naikus]

@Misiu This is good! Although I'd like the the label function determine what to do with the value. If it returns a string, it is set as textContent. If it does not return a value, the gauge can assume that label handled (appended) content to the value element.

var val = label.call(opts, theValue, gaugeValueElem);
if(typeof val === "string") {
  gaugeValueElem.textContent = val;
}
// otherwise the gauge assumes the label took care of showing the value inside valueElement

This will be backwards compatible too since the first argument to the label function will always be value of the gauge. What are you thoughts?

[Misiu]

@naikus thanks for reply. Your solution has one potential benefit over mine. I must do a while loop to remove all elements from svg text element before I add new elements. If label function would return svg text element then inside updateGauge You could just replace gaugeValueElem and problem solved. Although this way user will have to style elements by his own (now this is done in initializeGauge).

Ideally all labels should be initialized when calling Gauge (they could be passed as an parameter) and then referenced inside label function to avoid adding and removing elements from svg. In my case I need one additional text that won't change value.

[naikus]

@Misiu Currently there is a workaround for your case (easier if your second label is static). This is without any change in the gauge's code. See the online demo for an example of this.

Meanwhile, I'll be working to implement this feature.

[AndreaMinato]

Hi @naikus, has this been implemented yet? I want to use your lib for a project but i need to have more than a string as the element inside of the gauge

[naikus]

What kind of elements do you want inside the guage? Graphic or only text or both?

[AndreaMinato]

@naikus, since the element that i need inside of the gauge is quite complex i decided to create directly a div with all the information i wanted to display and i positioned it where I needed, this also gave me more flexibility on phone screens

[archonic]

I'm not looking to render icons in the center, but I do find the inline styles on the text element difficult or impossible to style:

<text x="50" y="50" fill="#999" class="value-text" font-size="100%" font-family="sans-serif" font-weight="normal" text-anchor="middle" alignment-baseline="middle" dominant-baseline="central">90%</text>

I can change the color with fill on the parent but the fill="#999" ends up shifting it. Does it have to be an SVG element?