ClassNames for the custom values made with segmentValueFormatter()

[Drillbeary]

Hello :)

Was making some speedometers and was looking to style the values from segmentValueFormatter(). but it doesn't seem like it's possible to return a className to the custom value, because the function only returns a string.

So currently i'm using a hook to call a useEffect after it's rendered to add a className. was wondering if you're open to a PR to make it possible to return className to the custom values.

I see that the current open PRs are kind of old, so i'll drop this discussion here to see if it's something you'd want :)
the speedometer components looking clean 👍

Will also drop a picture of how it currently looks. It's a visualization of energy usage. and i wanted the Δ% to just be styled differently so it doesn't look the same. The Δ% is the % increase over the average usage.

[palerdot]

Hi ... Can you share an example snippet of what behaviour your are looking for and a comparison with current behaviour? segmentValueFormatter can be made to return any string that makes sense to your app something like

segmentValueFormatter={value => {
   if (value === 0) {
      return 'text-red-500'
  }

  return `${someClassName} text-gray-500`
}}

If you can share an example snippet outlining your needs, it would be easy for me to get the context.

[Drillbeary]

preferably i wanted to just slap on a textNode.classList.add("ClassNameHere") to be able to style it. but i don't think getting dom access at that point is doable. so being able to handle objects like this:

 segmentValueFormatter={(value) =>{
  if (String(value) === String(Warning)) {
    return <text class="delta-text">Δ% ${Math.round(delta)}</text>;
  }
  return String(value);
}}

or being able to return objects:

segmentValueFormatter={value => {
  if (value === String(Warning) {
    return {
      text: Δ% ${Math.round(delta)},
      className: "delta-text text-gray-500"
    };
  }
  return {
    text: String(value),
    className: "return-text text-red-500"
  };
}}

Then the speedometer should for example apply:
<text class="segment-value segment-value-delta-text">Δ% 10</text>

my app doesn't change anything to the guage code. I only go after it renders and add on a className using a useEffect().

 useEffect(() => {
    const node = ref.current;
    if (!node) return
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        const labels = node.querySelectorAll("text.segment-value");
        labels.forEach((textNode, index) => {
          const isThirdLabel = index === 2;
          if (isThirdLabel) {
            textNode.classList.add("delta-text");
          }
        });
      });
    });
  }

and the goal would be to just have a className to style when you make a customValue. i don't want to do any string splicing to handle the output to then add the className. i want the guage to render with a preset className, no extra handling.

Could be that i'm misunderstanding what you said. but i don't see a way to do both the metadata and the custom value without doing some sort of string splicing to splitt and handle both in a single line of string.

edit: ``` instead of a single ` for codeblocks

[palerdot]

My suggestion is to directly make use of DOM classnames <text class="segment-value" /> and manipulate them to your needs. For e.g if you have 5 segment values - 100, 200, 300, 400, 500 you would have a final DOM that looks like this

<text transform="rotate(-90) translate(0, -140)" class="segment-value" style="text-anchor: middle; font-size: 14px; font-weight: bold; fill: rgb(170, 170, 170);">100</text>
<text transform="rotate(-90) translate(0, -140)" class="segment-value" style="text-anchor: middle; font-size: 14px; font-weight: bold; fill: rgb(170, 170, 170);">200</text>
<text transform="rotate(-90) translate(0, -140)" class="segment-value" style="text-anchor: middle; font-size: 14px; font-weight: bold; fill: rgb(170, 170, 170);">300</text>
<text transform="rotate(-90) translate(0, -140)" class="segment-value" style="text-anchor: middle; font-size: 14px; font-weight: bold; fill: rgb(170, 170, 170);">400</text>
<text transform="rotate(-90) translate(0, -140)" class="segment-value" style="text-anchor: middle; font-size: 14px; font-weight: bold; fill: rgb(170, 170, 170);">500</text>

You could then target these DOM elements and change them as per your requirements. segmentValueFormatter would always return a string and would always take the value as argument. Idea is to change the display text and not manipulate the dom class names.

[palerdot]

i want the guage to render with a preset className, no extra handling.

This is not in the roadmap. But I can consider a well crafted PR. Again, the way you are doing right now by targeting the DOM class names is the way to go as of now.

[palerdot]

This functionality should be part of a dedicated prop, something like segmentValueClassname which would return a string that would be added to the DOM node.

The final implementation would look something like

segmentValueClassname = (value, index) => {
  if (index === 0) {
     return `first-class-name`
  }
   return `rest-class-name`
}

And the final DOM would look something like

<text class="segment-value first-class-name" />
<text class="segment-value rest-class-name" />
<text class="segment-value rest-class-name" />

Again, this is not in the roadmap. Current way of manipulating the generated DOM is preferred and one of the use cases of the segment-value class name.

[Drillbeary]

So it looks like i've overlooked the use of the css pseudo-class slector :nth-of-types() and :nth-child() on the class="segment-value".

This would work for my use-case.

  .segment-value:nth-of-type(3) {
    fill: gray !important;
    font-size: 1rem !important;
  }

And with a combination of :nth-child(n) and :nth-last-child(n) you can reach any single value in the "array" of text tags. by reverse selecting them. for example an array length of 20 and you want to style the 2nd value. You can select it by doing :nth-last-child(19).

And since the text tags are structured inside of a parent element, the css would reset for each guage. so i don't see a situation where you can't select and style a element with this. so a dedicated prop of segmentValueClassname would only help with simplifying css logic and you don't need to spam !important everywhere. but idk how much value it'll have.

i'm fine with leaving this as is. if you want the segmentValueClassname i can work on a PR.
thanks for taking the time for this discussion :)

[palerdot]

For now, let us leave as is. If need arises I can revisit segmentValueClassname if something is not achievable by CSS.