Project overhaul

[antoniolago]

This was moved to #89

I created this project to be able to show a datacenter sensor's humidity/temperature in my graduation final paper's Datacenter-Automated-Controller (DAC) which is vastly documented and used around the world (sarcasm), the pre-fork gauge did not cut it because of the 0-100 hard limit so I had to step in, the min/max issue was piece of cake but this was the beginning of an insane rabbit hole that I dropped it at some point because it was a side quest and simply not worth the insane amount of time I was spending getting lost calculating those damn angles, svg frames and other nasty stuff.

And then real good LLMs happened and suddenly I had the firepower to be able to make this project so much better, it REALLY helped, but it was still hundreds of hours to bring v2 to a decent point.
I never touched DAC again after finishing school and the only page used to developed this gauge was the DEMO page, so anyone reading this can help by testing this new version specially on existing environments to catch possible bugs or unwanted behavior, but I really hope this make your projects a lot cooler, enough chit chat:

ps: Yep my commit flow sucks, but try to create a resizing framework for this component at 5am.

Changelog

v1.2.64 -> v2.0.05-rc

Note: This version is a full overhaul of the Gauge component and will surely require a lot of patches along the way, so upgrade with care.

New Features

• Now grafana type supports pointers. Is it possible to make type radial behave the same as grafana to get something like this? #37
• Added support for multiple pointers. Multiple Pointers/values #48

Details

<GaugeComponent
type="grafana"
minValue={0}
maxValue={100}
value={50}
pointers={[
    {
      value: 50,
      type: "needle",
      baseColor: "#ffffff",
      length: 0.87,
      width: 24,
      strokeWidth: 2,
      strokeColor: "#000000"
    },
    {
      value: 30,
      type: "needle",
      color: "#F5CD19",
      baseColor: "#ffffff",
      length: 0.87,
      width: 24,
      strokeWidth: 2,
      strokeColor: "#000000"
    }
  ]}
/>

• Pointers are now INPUTS too, just set onValueChange and try to grab the pointer through arcs.
• DEMO editor with copy/paste function, very helpful to build gauges.
• Added some CSS/SVG effects like glow, blur and shadows
• Grafana second arc can be configured
• Strokes can be configured for pointers.
• You can remove padding of the initial/final arcs via arc.padEndpoints. Padding is applied at the start and end of the gauge not just between sub arcs #75
• Added support for live editor. Create live editor of gauge properties in DEMO #25
• Added a lot of unit tests Create unit tests #24
• Added support components in labels. Any way to do multi line on value label? #69 Add feature: components can be passed as parameters to labels #74
• Added distanceFromText to TickLineConfig and default tick config.
• The most special one for me: proper resizing and placing, no elements are cut from the frame, the whole gauge painting gets compressed dynamically to keep all elements visible.

Bug Fixes

• Added pointer existence/count validation utilities to detect mismatches and recover.
• Fixed several pointer rendering/animation edge cases (flicker, incorrect reuse, inconsistent redraw behavior).
• Improved arc validation and subArc limit handling (clamping + auto-adjustment for invalid limits).
• Because of the new coordinate system, tick label placement logic was updated to respect spacing and it's easily edited on the editor. Error Config Stick label #51

Rendering architecture

• Coordinate-system layout

  • Introduced a dedicated coordinate system module for computing layout (center, viewBox, radii). Gauge blobs are misaligned on half-circle depending on screen/element size (Responsive Design issue) #79
  • Added focused unit tests around layout math (coordinate system, containment, svg sizing).

• Resize + two-pass render behavior

  • In order to correctly calculate all the container's available space, a double render was introduced so we can get the total viewBox given a gauge, then we use that viewBox to redraw utilizing all the possible space (noice!), at the cost of performance obviously. This makes the component more reliable on resizing (which was a nightmare). Gauge ignores container height changes and overflows on vertical resize (horizontal resize works) #86 Outer arc doesn't scale and becomes very thin on 4K screens - proposed solution #84 ResizeObserver loop completed with undelivered notifications #80 Fill gauge into svg space #63 Arrow becomes misaligned with arc at smaller sizes #45

• Render entry point

  • Added a render.tsx entry point to centralize rendering responsibilities.

Dependency / build changes

• Dependency updates
  • Migration from lodash to lodash-es. Lodash Import > Treeshake #88

Notes / Known behavior

• Arc warnings
  • If you see messages like “SubArc limit X is outside range …”, they are emitted by the new validation logic to prevent invalid configurations from producing broken rendering.

[laralimamota]

I used your project early on in a dashboard at my company, and seeing it take shape like this now is amazing

[antoniolago]

I used your project early on in a dashboard at my company, and seeing it take shape like this now is amazing

That's so nice to hear :')

Tho I messed this PR up and reverted from main lol, I noticed some flickering when I tried to use v2.0.04-rc in a dashboard, so I'll keep just the preview version for now as I'm taking vacations the next weeks 😎

When I get back I'll try to release a stable version for real.

[laralimamota]

(acabei de ver que você é BR, vou economizar meu inglês hehe)

se liga na primeira versão do dashboard que eu fiz na época com os seus componentes:

obs: é uma página para analisar o desempenho dos caminhões de uma transportadora. quanto melhor dirigirem, menos combustível gasta e menos menutenção tem, então pediram essa página pra ficarem analisando quem tava pecando

na primeira versão eu fiz com react, agora mudei pra angular e ficou mto diferente

tive que parar de usar seus componentes pq tinha alguns detalhes mto específicos que precisávamos, mas nos inspiramos em você pra criar nossa própria lib interna de gauge

boas férias! quais os planos?

[antoniolago]

Po que massa saber que esse projeto teve impacto por aí, obrigado por compartilhar, bem interessante mesmo.

Criei outro PR para termos o preview dessa versão nova: #89
Preview: https://antoniolago.github.io/react-gauge-component/pr-89/

boas férias! quais os planos?

Valeuuu! As férias vai ser curtindo umas praias no Uruguai hehehe