Flow meter with totalizer

npx shadcn@latest add "https://pidstack.com/r/gauge-flow-totalizer.json"

import { GaugeFlowTotalizer } from "@/components/pidstack/gauge-flow-totalizer"
import "@/components/pidstack/pidstack.css"

<div data-theme="day">
  <GaugeFlowTotalizer state="running" label="XI-101" size="medium" />
</div>

<svg xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Flow meter with totalizer" class="sym" data-state="running" data-sym="gauge-flow-totalizer" viewBox="0 0 96 72" width="96" height="72" focusable="false"><title>Flow meter with totalizer</title><style>.sym{color:var(--sym-state-running,#12803a);--a:var(--sym-state-running,#12803a);--_f:var(--sym-fill-running,#d3f0dc);overflow:visible;display:block;flex:none}
.sym[data-state=warning]{color:var(--sym-state-warning,#d99a00);--a:var(--sym-state-warning,#d99a00);--_f:var(--sym-fill-warning,#fff0b0)}
.sym[data-state=failure]{color:var(--sym-state-failure,#d0021b);--a:var(--sym-state-failure,#d0021b);--_f:var(--sym-fill-failure,#fcd3d7)}
.sym[data-state=stopped]{color:var(--sym-state-stopped-line,#000000);--a:var(--sym-state-stopped-line,#000000);--_f:var(--sym-state-stopped-fill,#ffffff);filter:var(--sym-state-stopped-halo,none)}
.sym[data-state=stopped] text:not(.tb){fill:var(--sym-state-stopped-line,#000000)}
.sym[data-state=unknown]{color:var(--sym-off,#66727f);--a:var(--sym-off,#66727f);--_f:var(--sym-bg,#ffffff)}
.sym *{stroke-linecap:round;stroke-linejoin:round}
.sym .k{fill:none;stroke:currentColor;stroke-width:2}
.sym .b{fill:var(--_f);stroke:currentColor;stroke-width:2}
.sym .a{fill:none;stroke:var(--a);stroke-width:2}
.sym .ab{fill:var(--_f);stroke:var(--a);stroke-width:2}
.sym .s{fill:currentColor;stroke:none}
.sym .as{fill:var(--a);stroke:none}
.sym .th{stroke-width:4}
.sym .lv{fill:var(--a);opacity:.4;stroke:none}
.sym .halo{fill:var(--sym-bg,#ffffff);stroke:var(--sym-bg,#ffffff);stroke-width:2}
.sym .bg{stroke:var(--sym-bg,#ffffff);stroke-width:1.8;fill:none}
.sym .bgf{fill:var(--sym-bg,#ffffff);stroke:none}
.sym .flow{fill:none;stroke:var(--a);stroke-width:3.4;stroke-dasharray:0.1 20}
.sym text,.sym .x{font-family:var(--sym-font,system-ui,"Segoe UI",Roboto,sans-serif);font-weight:700;text-anchor:middle;fill:var(--sym-text,#1f2933);stroke:none}
.sym text.tb{fill:var(--sym-bg,#ffffff)}
.sym[data-state=unknown] .k,.sym[data-state=unknown] .b{stroke-dasharray:4 3}
.sym .nd{fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.sym .zk-ok,.sym .zk-warning,.sym .zk-failure{fill:none;stroke-width:4;stroke-linecap:butt}
.sym .zk-ok{stroke:var(--sym-state-running,#12803a)}
.sym .zk-warning{stroke:var(--sym-state-warning,#d99a00);stroke-dasharray:5 2.5}
.sym .zk-failure{stroke:var(--sym-state-failure,#d0021b);stroke-dasharray:2 2}
.sym[data-state=stopped] [class^=zk-]{opacity:.55}
.sym .g-led{stroke:none}</style><g><g transform="translate(24 0)"><circle class="b" cx="24" cy="26" r="22.5"></circle><path class="zk-ok" d="M8.84 34.75 A17.5 17.5 0 0 1 31.12 10.01"></path><path class="zk-warning" d="M31.12 10.01 A17.5 17.5 0 0 1 41.4 24.17"></path><path class="zk-failure" d="M41.4 24.17 A17.5 17.5 0 0 1 39.16 34.75"></path><path class="k" stroke-width="1.4" d="M9.28 34.5 L12.74 32.5 M9.28 17.5 L12.74 19.5 M24 9 L24 13 M38.72 17.5 L35.26 19.5 M38.72 34.5 L35.26 32.5"></path><g class="nd" style="transform:rotate(28.80000000000001deg);transform-origin:24px 26px;stroke-width:2.4"><path d="M24 26 V12"></path></g><circle class="s" cx="24" cy="26" r="2.6"></circle></g><rect class="b" x="8" y="52" width="80" height="16" rx="2" style="fill:var(--sym-bg)"></rect><g><text x="48" y="64" style="font-size:10px">000482.7</text></g></g></svg>