Allow label function to return svg elements to be rendered as labels e.g. svg:text about svg-gauge HOT 9 OPEN

@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?

from svg-gauge.

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

from svg-gauge.

@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?

from svg-gauge.

@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.

from svg-gauge.

@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.

from svg-gauge.

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

from svg-gauge.

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

from svg-gauge.

@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

from svg-gauge.

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?

from svg-gauge.