carbon-uplot 1.0.0

package/README.md

@@ -0,0 +1,138 @@
+# carbon-µPlot
+
+Carbon-styled observability charts for metrics, monitoring, and operational dashboards.
+
+This library is a thin wrapper around [uPlot](https://github.com/leeoniya/uPlot) — one of the fastest, smallest charting libraries available — with IBM Carbon design system tokens applied automatically. If your application already loads Carbon CSS, there is nothing extra to configure. All four Carbon themes (White, G10, G90, G100) work out of the box, and the demo site includes a live theme switcher so you can preview every chart in each theme.
+
+Gauges (arc and bar) are implemented natively in this library and are not backed by uPlot.
+
+**Live demos:** [grommett.github.io/carbon-uplot](https://grommett.github.io/carbon-uplot)
+
+---
+
+## Credit
+
+All time-series and canvas rendering is done by [uPlot](https://github.com/leeoniya/uPlot), written by Leon Sorokin. uPlot is extraordinarily fast — it renders 60 fps on datasets with hundreds of thousands of points — and its columnar data format maps directly to what Prometheus, CloudWatch, and InfluxDB actually return. carbon-µPlot would not exist without it. If you find this library useful, go star uPlot.
+
+---
+
+## Chart types
+
+| Chart | Backed by |
+|---|---|
+| Line | uPlot |
+| Area | uPlot |
+| Bar | uPlot |
+| Scatter | uPlot |
+| Heatmap | uPlot |
+| Gauge (arc) | native |
+| Stat | native |
+| Bar Gauge | native |
+
+---
+
+## Installation
+
+```bash
+npm install carbon-uplot uplot
+```
+
+uPlot is a peer dependency. React is optional — only install it if you use the React bindings.
+
+---
+
+## Usage
+
+### Vanilla JS
+
+```js
+import { createLineChart } from 'carbon-uplot';
+
+createLineChart(document.getElementById('chart'), {
+  data: [timestamps, seriesA, seriesB],
+  series: [{ label: 'node-a' }, { label: 'node-b' }],
+  yRange: [0, 100],
+});
+```
+
+### React
+
+```jsx
+import { LineChart } from 'carbon-uplot/react';
+
+<LineChart
+  data={[timestamps, seriesA, seriesB]}
+  series={[{ label: 'node-a' }, { label: 'node-b' }]}
+  yRange={[0, 100]}
+  style={{ height: 240 }}
+/>
+```
+
+### Web Components
+
+```js
+import 'carbon-uplot/web-components';
+```
+
+```html
+<cu-line-chart style="height: 240px"></cu-line-chart>
+
+<script>
+  const el = document.querySelector('cu-line-chart');
+  el.data = [timestamps, seriesA, seriesB];
+  el.series = [{ label: 'node-a' }, { label: 'node-b' }];
+  el.yRange = [0, 100];
+</script>
+```
+
+---
+
+## Thresholds
+
+Gauge and Bar Gauge both accept a `thresholds` array. Bar Gauge also supports `inverted` mode for metrics where low values are bad (e.g. availability percentages).
+
+```js
+// Normal — high values are bad (e.g. CPU utilization)
+const thresholds = [
+  { value: 70, status: 'warning' },
+  { value: 85, status: 'error' },
+];
+
+// Inverted — low values are bad (e.g. availability %)
+createBarGauge(el, {
+  series: availability,
+  thresholds: [{ value: 80, status: 'error' }, { value: 95, status: 'warning' }],
+  inverted: true,
+});
+```
+
+---
+
+## Carbon CSS
+
+carbon-µPlot reads Carbon CSS custom properties (`--cds-interactive`, `--cds-support-warning`, etc.) from the document. Apply a theme class to your root element and charts update automatically:
+
+```js
+document.documentElement.classList.add('cds--g100');
+```
+
+No chart-specific configuration needed.
+
+---
+
+## Demo and development
+
+The `demo/` folder contains a full Eleventy site with live examples for every chart type, including Vanilla JS, React, and Web Component code samples.
+
+```bash
+npm run dev      # build + watch + serve at localhost:3131
+npm run demo     # one-shot build + serve
+```
+
+The built site is deployed to GitHub Pages at [grommett.github.io/carbon-uplot](https://grommett.github.io/carbon-uplot).
+
+---
+
+## License
+
+MIT

package/dist/carbon-uplot.cjs.js

@@ -0,0 +1 @@
+"use strict";var e=require("uplot");const t="cu-styles";if(!document.getElementById(t)){const e=document.createElement("style");e.id=t,e.textContent=":root {\n  --cu-background: var(--cds-background, #ffffff);\n  --cu-layer-01: var(--cds-layer-01, #f4f4f4);\n  --cu-layer-02: var(--cds-layer-02, #ffffff);\n  --cu-text-primary: var(--cds-text-primary, #161616);\n  --cu-text-secondary: var(--cds-text-secondary, #525252);\n  --cu-text-helper: var(--cds-text-helper, #6f6f6f);\n  --cu-border-subtle: var(--cds-border-subtle-01, #c6c6c6);\n  --cu-border-subtle-02: var(--cds-border-subtle-02, #e0e0e0);\n  --cu-axis: var(--cds-border-strong-01, #8d8d8d);\n  --cu-interactive: var(--cds-interactive, #0f62fe);\n  --cu-support-error: var(--cds-support-error, #da1e28);\n  --cu-support-warning: var(--cds-support-warning, #f1c21b);\n  --cu-support-success: var(--cds-support-success, #24a148);\n  --cu-support-info: var(--cds-support-info, #0043ce);\n  --cu-layer: var(--cu-layer-01);\n  --cu-grid: rgba(0,0,0,0.07);\n}\n\n.cds--g90 {\n  --cu-grid: rgba(255,255,255,0.09);\n}\n\n.cds--g100 {\n  --cu-grid: rgba(255,255,255,0.07);\n}\n\n.cds--tile {\n  --cu-tooltip-bg: var(--cu-layer-01);\n}\n\n.u-select {\n  background: rgba(15, 98, 254, 0.1);\n  border-left: 1px solid rgba(15, 98, 254, 0.5);\n  border-right: 1px solid rgba(15, 98, 254, 0.5);\n}\n\n.cds--g90 .u-select,\n.cds--g100 .u-select {\n  background: rgba(69, 137, 255, 0.2);\n  border-left: 1px solid rgba(69, 137, 255, 0.65);\n  border-right: 1px solid rgba(69, 137, 255, 0.65);\n}\n",document.head.appendChild(e)}const n={white:{"--cu-background":"#ffffff","--cu-layer-01":"#f4f4f4","--cu-layer-02":"#ffffff","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#c6c6c6","--cu-border-subtle-02":"#e0e0e0","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g10:{"--cu-background":"#f4f4f4","--cu-layer-01":"#ffffff","--cu-layer-02":"#f4f4f4","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#e0e0e0","--cu-border-subtle-02":"#c6c6c6","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g90:{"--cu-background":"#262626","--cu-layer-01":"#393939","--cu-layer-02":"#525252","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#c6c6c6","--cu-border-subtle":"#6f6f6f","--cu-border-subtle-02":"#8d8d8d","--cu-axis":"#8d8d8d","--cu-interactive":"#4589ff","--cu-support-error":"#ff8389","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.09)"},g100:{"--cu-background":"#161616","--cu-layer-01":"#262626","--cu-layer-02":"#393939","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#a8a8a8","--cu-border-subtle":"#525252","--cu-border-subtle-02":"#6f6f6f","--cu-axis":"#6f6f6f","--cu-interactive":"#4589ff","--cu-support-error":"#fa4d56","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.07)"}},r="IBM Plex Sans, sans-serif",o="IBM Plex Mono, monospace",s="cu-ibm-plex-fonts";const a={"cds--white":"white","cds--g10":"g10","cds--g90":"g90","cds--g100":"g100"},c=["#4589ff","#3ddbd9","#be95ff","#42be65","#ff832b","#f1c21b","#ff8389"];function i(e={}){const t=l("--cu-axis"),n=l("--cu-grid");return{stroke:t,ticks:{stroke:n,width:1},grid:{stroke:n,width:1},font:`11px ${o}`,...e}}function l(e){const t=getComputedStyle(document.documentElement),r=n[function(){const e=Object.keys(a).find(e=>document.documentElement.classList.contains(e));return a[e]??"white"}()];return t.getPropertyValue(e).trim()||r[e]||""}const u="cu-theme-change",d="cu-chart-recreated";function p(e){return document.addEventListener(u,e),()=>document.removeEventListener(u,e)}const f=Symbol("carbonSeriesColors"),m={stroke:"transparent",fill:"transparent",paths:()=>null};function h(e,t){return Array.from({length:e},(e,n)=>(t[n]??{}).color??c[n%c.length])}function g(e,t){const{plugins:n=[],...r}=t;return{plugins:[...e,...n],restOptions:r}}function x(t,n,r,o){const s=t.getBoundingClientRect().width||t.clientWidth||300,a=t.clientHeight||170,c=new e({width:s,height:a,background:"transparent",padding:[8,8,0,0],legend:{show:!1},cursor:{show:!0,drag:{x:!0,y:!1,uni:10}},...n},r,t),i=new ResizeObserver(e=>{const n=e[0]?.contentRect.width;n>0&&c.setSize({width:n,height:t.clientHeight})});i.observe(t);const l=c.destroy.bind(c);let u=null;return o&&(u=p(()=>{i.disconnect(),u(),l();const e=o(t);e&&t.dispatchEvent(new CustomEvent(d,{detail:{chart:e}}))})),c.destroy=()=>{i.disconnect(),u&&u(),l()},c}const b={display:"flex",flexWrap:"wrap",gap:"12px"},y={marginTop:"8px",paddingTop:"8px",borderTop:"0.5px solid var(--cu-border-subtle)"},v={marginBottom:"8px",paddingBottom:"8px",borderBottom:"0.5px solid var(--cu-border-subtle)"},E={display:"flex",alignItems:"center",gap:"5px",fontSize:"11px",fontFamily:"inherit",color:"var(--cu-text-secondary)",background:"none",border:"none",padding:"0",cursor:"pointer"},w={width:"16px",height:"2px",flexShrink:"0"};function C(e,t){Object.assign(e.style,t)}function k(e,t,n,r){if(!1===r)return;const o=t.map(e=>e?.label);o.some(Boolean)&&F(e,o,n,"top"===r?"top":"bottom")}function F(e,t,n,r="bottom"){const o=e[f]??[],s=document.createElement("div"),a=[];return C(s,b),C(s,"top"===r?v:y),t.forEach((t,n)=>{if(!t)return;const{item:r,handler:c}=function(e,t,n,r){const o=document.createElement("button"),s=document.createElement("span"),a=M(n);a.chart=e,r&&(s.style.background=r);return C(o,E),C(s,w),o.appendChild(s),o.appendChild(document.createTextNode(t)),o.addEventListener("click",a),{item:o,handler:a}}(e,t,n+1,o[n]);s.appendChild(r),a.push([r,c])}),n.insertAdjacentElement("top"===r?"beforebegin":"afterend",s),e.hooks.destroy=e.hooks.destroy??[],e.hooks.destroy.push(()=>{a.forEach(([e,t])=>e.removeEventListener("click",t)),s.remove()}),s}const S=new WeakMap;function M(e){return{chart:null,handleEvent(t){const n=!1!==this.chart.series[e].show;this.chart.setSeries(e,{show:!n}),t.currentTarget.style.opacity=n?"0.3":""}}}const O="cu-tooltip__row";function j(){if(document.getElementById("cu-tooltip-styles"))return;const e=document.createElement("style");e.id="cu-tooltip-styles",e.textContent=`.${O}:not(:last-child) { border-bottom: 1px solid var(--cu-grid); }`,document.head.appendChild(e)}const $={position:"absolute",pointerEvents:"none",background:"var(--cu-tooltip-bg, var(--cu-background))",boxShadow:"0 2px 6px rgba(0, 0, 0, 0.3)",fontSize:"12px",fontFamily:r,color:"var(--cu-text-primary)",minWidth:"160px",zIndex:"100",display:"none"},A={padding:"8px 12px 6px",borderBottom:"1px solid var(--cu-grid)",fontFamily:o,fontSize:"11px",color:"var(--cu-text-primary)"},T={display:"flex",alignItems:"center",justifyContent:"space-between",gap:"24px",padding:"5px 12px 5px 9px"},L={fontFamily:o,fontSize:"11px",color:"var(--cu-text-primary)"};function z({colors:e,isTimeScale:t=!1,xFormat:n,valueFormat:r}={}){let o,s,a;return{hooks:{init:function(t){j(),o=document.createElement("div"),s=document.createElement("div"),Object.assign(o.style,$),Object.assign(s.style,A),o.appendChild(s),a=t.series.slice(1).map((t,n)=>{const r=e[n],s=document.createElement("div"),a=document.createElement("span"),c=document.createElement("span");return s.className=O,Object.assign(s.style,T),s.style.borderLeft=`3px solid ${r}`,a.textContent=null!=t.label?`${t.label} `:`Series ${n+1} `,Object.assign(c.style,L),s.appendChild(a),s.appendChild(c),o.appendChild(s),{row:s,valueEl:c,seriesIndex:n+1}}),o.style.bottom="8px",t.over.appendChild(o),t.over.addEventListener("mouseleave",()=>{o.style.display="none"}),t.over.addEventListener("mouseenter",()=>{o.style.display=null})},setCursor:function(e){const{left:c,idx:i}=e.cursor,l=e.over.getBoundingClientRect(),u=o.offsetWidth,d=l.left+c+16+u>window.innerWidth;null==i||c<0?o.style.display="none":(o.style.display=null,s.textContent=I(e.data[0][i],t,n),a.forEach(({row:t,valueEl:n,seriesIndex:o})=>{const s=e.series[o],a=e.data[o][i];s?.show?(t.style.display=null,n.textContent=null==a?"—":P(a,r)):t.style.display="none"}),o.style.left=d?c-16-u+"px":`${c+16}px`)}}}}function I(e,t,n){if(n)return n(e);if(t){const t=new Date(1e3*e),n=e=>String(e).padStart(2,"0");return`${t.getFullYear()}-${n(t.getMonth()+1)}-${n(t.getDate())} ${n(t.getHours())}:${n(t.getMinutes())}`}return String(e)}function P(e,t){return t?t(e):e.toLocaleString()}function B(e){return e?i({values:(t,n)=>n.map(t=>null==t?"":e(t)),size:(e,t)=>t?7*Math.max(...t.map(e=>e.length))+12:40}):i()}function R(e,t){return[{},...e.map((e,n)=>{const{label:r,width:o,color:s,...a}=t[n]??{};return{label:r,stroke:e,width:o??2,...a}})]}function W(e,t){return[{},...e.map((e,n)=>{const{label:r,width:o,color:s,...a}=t[n]??{};return{label:r,stroke:e,fill:e+"28",width:o??2,...a}})]}function H(e){return i({values:e?(t,n)=>n.map(e):void 0})}function D(e){return e?i({values:(t,n)=>n.map(t=>null==t?"":e(t)),size:(e,t)=>t?7*Math.max(...t.map(e=>e.length))+12:40}):i()}function V(e){return(t,n,r)=>{const o=e[0].length,s=(r-n)/(o-1)/2;return o<=1?[n,r]:[n-s,r+s]}}function N(t,n){return[{},...t.map((t,r)=>({label:n[r]?.label,fill:t,width:0,paths:e.paths.bars({size:[.6,18,1]}),points:(n[r]??{}).points??{show:!1}}))]}const _=`11px ${r}`;function G(e){return[{},...Array.from({length:e},()=>m)]}function q(e,t,n){const r=t.ctx,o=e[n-1]+"cc";r.save(),r.fillStyle=o,t.data[n].forEach((e,n)=>{r.beginPath(),r.arc(t.valToPos(t.data[0][n],"x",!0),t.valToPos(e,"y",!0),3.5,0,2*Math.PI),r.fill()}),r.restore()}const Y="var(--cu-interactive)",J="var(--cu-support-success)",K="var(--cu-border-subtle)",Q="var(--cu-text-primary)",U="var(--cu-text-secondary)",X="var(--cu-text-helper)";function Z(e){return`var(--cu-support-${e})`}const ee=90,te=14;const ne=Math.PI,re=130,oe=134;function se(){return["M 40 134","A 90 90 0 0 1 130 44","A 90 90 0 0 1 220 134"].join(" ")}function ae(e,t){const n=document.createElementNS("http://www.w3.org/2000/svg",e);return Object.entries(t).forEach(([e,t])=>n.setAttribute(e,t)),n}const ce={sm:"1.25rem",md:"2.5rem",lg:"5rem"};const ie=.08;function le(e){return[{},...Array.from({length:e},()=>m)]}function ue(e,t){const n=Array.from({length:t},(e,t)=>t+.5);return i({splits:()=>n,values:(t,n)=>n.map((t,n)=>e?e[n]??"":String(n)),size:(e,t)=>t?7*Math.max(...t.map(e=>e?e.length:0))+12:40})}exports.CHART_RECREATED_EVENT=d,exports.THEMES=n,exports.bindLegend=function e(t,n){const r=t[f]??[],o=t.root.parentElement;Array.from(n.children).forEach((e,n)=>{const o=n+1,s=r[n],a=e.firstElementChild;let c=S.get(e);s&&a&&(a.style.background=s),c||(c=M(o),S.set(e,c),e.addEventListener("click",c)),c.chart=t}),o.addEventListener(d,t=>{e(t.detail.chart,n)},{once:!0})},exports.createAreaChart=function e(t,n){const{series:r=[],data:o,yRange:s,legend:a=!0,tooltip:c=!0,valueFormat:l,xFormat:u,...d}=n,p=h(o.length-1,r),{plugins:m,restOptions:b}=g(function(e,t,n,r){return!1!==t?[z({colors:e,isTimeScale:!0,valueFormat:n,xFormat:r})]:[]}(p,c,l,u),d),y=x(t,{axes:[i(),i()],plugins:m,series:W(p,r),scales:{x:{time:!0},y:{range:s}},...b},o,()=>e(t,n));return y[f]=p,k(y,r,t,a),y},exports.createAxisConfig=i,exports.createBarChart=function e(t,n){const{series:r=[],data:o,yRange:s,xFormat:a,legend:c=!0,tooltip:i=!0,valueFormat:l,...u}=n,d=h(o.length-1,r),{plugins:p,restOptions:m}=g(function(e,t,n,r){return!1!==t?[z({colors:e,isTimeScale:!0,xFormat:n,valueFormat:r})]:[]}(d,i,a,l),u),b=x(t,{axes:[H(a),D(l)],plugins:p,series:N(d,r),scales:{x:{time:!0,range:V(o)},y:{range:s}},...m},o,()=>e(t,n));return b[f]=d,k(b,r,t,c),b},exports.createBarGauge=function(e,{series:t=[],min:n=0,max:s=100,color:a,thresholds:c=[],inverted:i=!1,valueFormat:l}={}){const u=function(){const e=document.createElement("div");return Object.assign(e.style,{display:"flex",flexDirection:"column",gap:"12px",padding:"1rem",width:"100%",boxSizing:"border-box"}),e}(),d=t.map(function(e,t){const a=function(e,t,n,s){const a=document.createElement("div"),c=document.createElement("span"),i=document.createElement("div"),l=document.createElement("div"),u=document.createElement("span");return Object.assign(a.style,{display:"grid",gridTemplateColumns:"minmax(0, max-content) 1fr max-content",alignItems:"center",gap:"12px"}),Object.assign(c.style,{fontSize:"12px",fontFamily:r,color:Q,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"140px"}),Object.assign(i.style,{height:"8px",background:K,borderRadius:"2px",overflow:"hidden"}),Object.assign(l.style,{height:"100%",borderRadius:"2px",transition:"width 0.2s ease, background 0.2s ease"}),Object.assign(u.style,{fontSize:"11px",fontFamily:o,color:Q,minWidth:"40px",textAlign:"right",whiteSpace:"nowrap"}),c.title=t.label??"",c.textContent=t.label??"",i.setAttribute("role","meter"),i.setAttribute("aria-label",t.label??""),i.setAttribute("aria-valuemin",n),i.setAttribute("aria-valuemax",s),i.appendChild(l),a.appendChild(c),a.appendChild(i),a.appendChild(u),e.appendChild(a),{fillEl:l,valueEl:u,trackEl:i}}(u,e,n,s),c=e.value??0;return p(a,t,c,e.status),a});function p(e,r,o,u){const d=Math.max(0,Math.min((o-n)/(s-n),1)),p=function(e,t,n,r,o,s){const a=o??t?.status;return t?.color?t.color:n||("good"===a?J:a?Z(a):r.length?s?function(e,t){const n=t.find(t=>e<t.value)??null;return n?Z(n.status):J}(e,r):function(e,t){const n=t.reduce((t,n)=>e>=n.value?n:t,null);return n?Z(n.status):J}(e,r):Y)}(o,t[r],a,c,u,i);e.fillEl.style.width=100*d+"%",e.fillEl.style.background=p,e.valueEl.textContent=l?l(o):o.toLocaleString(),e.trackEl.setAttribute("aria-valuenow",o)}return e.appendChild(u),{setValue:function(e,{value:t,status:n}={}){const r=d[e];r&&p(r,e,t,n)}}},exports.createGauge=function(e,{value:t=0,status:n,ticks:s=!0,thresholds:a=[],min:c=0,max:i=100,label:l,valueFormat:u,color:d}={}){const{svg:p,arcEl:f,valueLabelEl:m}=function(e,t,n,s){const a=ae("svg",{viewBox:"0 0 260 148",width:"100%"}),c=ae("path",{"stroke-width":te,fill:"none"}),i=ae("text",{x:re,y:114,"text-anchor":"middle","dominant-baseline":"middle",fill:Q,"font-size":36,"font-weight":300,"font-family":r});a.appendChild(function(){return ae("path",{d:se(),stroke:K,"stroke-width":te,fill:"none"})}()),a.appendChild(c),e&&function(e,t){const n=t-e;return[0,.25,.5,.75,1].map(t=>e+t*n)}(t,n).forEach(e=>function(e,t,n,r){const s=(t-n)/(r-n),a=ne+s*Math.PI,c=79,i=101,l=113,u=Math.cos(a),d=Math.sin(a),p=ae("text",{x:(re+l*u).toFixed(3),y:(oe+l*d).toFixed(3),"text-anchor":"middle","dominant-baseline":"middle",fill:X,"font-size":10,"font-family":o});e.appendChild(ae("line",{x1:(re+c*u).toFixed(3),y1:(oe+c*d).toFixed(3),x2:(re+i*u).toFixed(3),y2:(oe+i*d).toFixed(3),stroke:X,"stroke-width":1.5})),p.textContent=t.toLocaleString(),e.appendChild(p)}(a,e,t,n));a.appendChild(i),s&&a.appendChild(function(e){const t=ae("text",{x:re,y:144,"text-anchor":"middle","dominant-baseline":"middle",fill:U,"font-size":12,"font-family":r});return t.textContent=e,t}(s));return{svg:a,arcEl:c,valueLabelEl:i}}(s,c,i,l);function h({value:e,status:t}={}){f.setAttribute("d",function(e,t,n){const r=(e-t)/(n-t),o=ne+r*Math.PI,s=(re+ee*Math.cos(o)).toFixed(3),a=(oe+ee*Math.sin(o)).toFixed(3);return r<=0?"":r>=1?se():`M 40 134 A 90 90 0 0 1 ${s} ${a}`}(e,c,i)),f.setAttribute("stroke",d??function(e,t,n){if(t)return Z(t);if(!n?.length)return Y;const r=n.reduce((t,n)=>e>=n.value?n:t,null);return r?Z(r.status):Y}(e,t??n,a)),m.textContent=u?u(e):e}return e.appendChild(p),h({value:t}),{setValue:h,destroy:function(){p.remove()}}},exports.createHeatmap=function e(t,n){const{data:r,bucketLabels:o,color:s,xTime:a=!0,tooltip:l=!0,valueFormat:u,...d}=n,p=s??c[0],f=r.length-1,m=function(e){let t=0;return e.slice(1).forEach(e=>{e.forEach(e=>{null!=e&&e>t&&(t=e)})}),t||1}(r),h=function(e){if(!e.startsWith("#"))return[69,137,255];const t=e.slice(1),n=3===t.length?t.split("").map(e=>e+e).join(""):t;return[parseInt(n.slice(0,2),16),parseInt(n.slice(2,4),16),parseInt(n.slice(4,6),16)]}(p),b=function(e,t,n){const r=e.slice(1);function o(o){const s=o.ctx,[a,c,i]=t;s.save(),s.beginPath(),s.rect(o.bbox.left,o.bbox.top,o.bbox.width,o.bbox.height),s.clip(),e[0].forEach((t,l)=>{const u=Math.round(o.valToPos(t,"x",!0)),d=e[0][l+1],p=void 0!==d?Math.round(o.valToPos(d,"x",!0)):Math.round(o.bbox.left+o.bbox.width),f=Math.max(1,p-u);r.forEach((e,t)=>{const r=e[l];if(!r)return;const d=ie+.92*(r/n);s.fillStyle=`rgba(${a}, ${c}, ${i}, ${d.toFixed(2)})`;const p=Math.round(o.valToPos(t+1,"y",!0)),m=Math.round(o.valToPos(t,"y",!0)),h=Math.max(1,m-p);s.fillRect(u,p,f,h)})}),s.restore()}return{hooks:{draw:[o]}}}(r,h,m),y=!1!==l?function(e,t,n,r,o,s){let a,c,i,l,u;return{hooks:{init:function(e){j(),a=document.createElement("div"),c=document.createElement("div"),i=document.createElement("div"),l=document.createElement("span"),u=document.createElement("span"),Object.assign(a.style,$),Object.assign(c.style,A),Object.assign(i.style,T),Object.assign(u.style,L),i.className=O,i.appendChild(l),i.appendChild(u),a.appendChild(c),a.appendChild(i),e.over.appendChild(a),e.over.addEventListener("mouseleave",()=>{a.style.display="none"}),e.over.addEventListener("mouseenter",()=>{a.style.display=null})},setCursor:function(d){const{left:p,top:f,idx:m}=d.cursor,h=e.length-1;if(null==m||p<0)return void(a.style.display="none");const g=d.posToVal(f,"y"),x=Math.max(0,Math.min(Math.floor(g),h-1)),b=e[x+1][m],y=ie+.92*(null!=b?b/s:0),[v,E,w]=o;c.textContent=I(e[0][m],n,null),l.textContent=t?t[x]??`Row ${x}`:`Row ${x}`,u.textContent=null==b?"—":P(b,r),i.style.borderLeft=`3px solid rgba(${v}, ${E}, ${w}, ${y.toFixed(2)})`;const C=d.over.getBoundingClientRect(),k=a.offsetWidth,F=C.left+p+16+k>window.innerWidth;a.style.display=null,a.style.left=F?p-16-k+"px":`${p+16}px`,a.style.top=f-20+"px"}}}}(r,o,a,u,h,m):null,v=y?[b,y]:[b],{plugins:E,restOptions:w}=g(v,d);return x(t,{plugins:E,series:le(f),axes:[i(),ue(o,f)],scales:{x:{time:a},y:{range:[0,f]}},cursor:{x:!1,y:!1},...w},r,()=>e(t,n))},exports.createLegend=F,exports.createLineChart=function e(t,n){const{series:r=[],data:o,yRange:s,legend:a=!0,tooltip:c=!0,valueFormat:l,xFormat:u,...d}=n,p=h(o.length-1,r),{plugins:m,restOptions:b}=g(function(e,t,n,r){return!1!==t?[z({colors:e,isTimeScale:!0,valueFormat:n,xFormat:r})]:[]}(p,c,l,u),d),y=x(t,{axes:[i(),B(l)],plugins:m,series:R(p,r),scales:{x:{time:!0},y:{range:s}},...b},o,()=>e(t,n));return y[f]=p,k(y,r,t,a),y},exports.createScatterChart=function e(t,n){const{series:r=[],data:o,xRange:s,yRange:a,xLabel:c,yLabel:l,legend:u=!0,...d}=n,p=o.length-1,m=h(p,r),{plugins:b,restOptions:y}=g([(v=m,{hooks:{drawSeries:[q.bind(null,v)]}})],d);var v;const E=x(t,{axes:[i({label:c,labelFont:_}),i({label:l,labelFont:_})],plugins:b,series:G(p),scales:{x:{time:!1,range:s},y:{range:a}},...y},o,()=>e(t,n));return E[f]=m,k(E,r,t,u),E},exports.createStat=function(e,{value:t=0,data:n,label:o,valueFormat:s,showValue:a=!0,sparkline:i=!0,color:l,size:u="md",align:d="left",verticalAlign:p="top"}={}){const f=l??c[0],m=function(e){const t=document.createElement("div");return Object.assign(t.style,{display:"flex",flexDirection:"column",width:"100%",height:"100%",overflow:"hidden",justifyContent:"center"===e?"center":"flex-start"}),t}(p);e.appendChild(m);const h=a?function(e,t,n,o,s){const a=document.createElement("div"),c=document.createElement("div");if(Object.assign(a.style,{padding:"1rem 1rem 0.5rem",display:"flex",flexDirection:"column",gap:"0.25rem"}),Object.assign(c.style,{fontSize:ce[o],fontWeight:"300",lineHeight:"1",fontFamily:r,color:t,textAlign:s}),a.appendChild(c),n){const e=document.createElement("div");Object.assign(e.style,{fontSize:"0.75rem",fontFamily:r,color:U,textAlign:s}),e.textContent=n,a.appendChild(e)}return e.appendChild(a),c}(m,f,o,u,d):null;let g=n?[n[0].slice(),n[1].slice()]:null;const b=g&&g[0].length>1?g[0].at(-1)-g[0].at(-2):1;let y=null;if(i&&g){const e=function(e){const t=document.createElement("div");return Object.assign(t.style,{flex:"1",minHeight:"64px"}),e.appendChild(t),t}(m);y=function(e,t,n){const r=[{},{stroke:n,fill:n+"28",width:1.5,points:{show:!1}}];return x(e,{cursor:{show:!1},axes:[{show:!1},{show:!1}],padding:[4,0,4,0],series:r,scales:{x:{time:!0}}},t,null)}(e,g,f)}return h&&(h.textContent=s?s(t):t),{setValue:function({value:e}={}){h&&(h.textContent=s?s(e):e),y&&g&&(g[0].push(g[0].at(-1)+b),g[1].push(e),g[0].shift(),g[1].shift(),y.setData(g))}}},exports.createTooltipPlugin=z,exports.loadFonts=function(){if(document.getElementById(s))return;const e=document.createElement("link");e.rel="preconnect",e.href="https://fonts.googleapis.com";const t=document.createElement("link");t.id=s,t.rel="stylesheet",t.href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@300;400&display=swap",document.head.appendChild(e),document.head.appendChild(t)},exports.onThemeChange=p,exports.setTheme=function(e,t=document.documentElement){const r=n[e];if(!r)throw new Error(`carbon-uplot: unknown theme "${e}". Available: ${Object.keys(n).join(", ")}`);Object.entries(r).forEach(([e,n])=>t.style.setProperty(e,n)),document.dispatchEvent(new CustomEvent(u,{detail:{name:e}}))};

package/dist/carbon-uplot.esm.js

@@ -0,0 +1 @@
+import e from"uplot";const t="cu-styles";if(!document.getElementById(t)){const e=document.createElement("style");e.id=t,e.textContent=":root {\n  --cu-background: var(--cds-background, #ffffff);\n  --cu-layer-01: var(--cds-layer-01, #f4f4f4);\n  --cu-layer-02: var(--cds-layer-02, #ffffff);\n  --cu-text-primary: var(--cds-text-primary, #161616);\n  --cu-text-secondary: var(--cds-text-secondary, #525252);\n  --cu-text-helper: var(--cds-text-helper, #6f6f6f);\n  --cu-border-subtle: var(--cds-border-subtle-01, #c6c6c6);\n  --cu-border-subtle-02: var(--cds-border-subtle-02, #e0e0e0);\n  --cu-axis: var(--cds-border-strong-01, #8d8d8d);\n  --cu-interactive: var(--cds-interactive, #0f62fe);\n  --cu-support-error: var(--cds-support-error, #da1e28);\n  --cu-support-warning: var(--cds-support-warning, #f1c21b);\n  --cu-support-success: var(--cds-support-success, #24a148);\n  --cu-support-info: var(--cds-support-info, #0043ce);\n  --cu-layer: var(--cu-layer-01);\n  --cu-grid: rgba(0,0,0,0.07);\n}\n\n.cds--g90 {\n  --cu-grid: rgba(255,255,255,0.09);\n}\n\n.cds--g100 {\n  --cu-grid: rgba(255,255,255,0.07);\n}\n\n.cds--tile {\n  --cu-tooltip-bg: var(--cu-layer-01);\n}\n\n.u-select {\n  background: rgba(15, 98, 254, 0.1);\n  border-left: 1px solid rgba(15, 98, 254, 0.5);\n  border-right: 1px solid rgba(15, 98, 254, 0.5);\n}\n\n.cds--g90 .u-select,\n.cds--g100 .u-select {\n  background: rgba(69, 137, 255, 0.2);\n  border-left: 1px solid rgba(69, 137, 255, 0.65);\n  border-right: 1px solid rgba(69, 137, 255, 0.65);\n}\n",document.head.appendChild(e)}const n={white:{"--cu-background":"#ffffff","--cu-layer-01":"#f4f4f4","--cu-layer-02":"#ffffff","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#c6c6c6","--cu-border-subtle-02":"#e0e0e0","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g10:{"--cu-background":"#f4f4f4","--cu-layer-01":"#ffffff","--cu-layer-02":"#f4f4f4","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#e0e0e0","--cu-border-subtle-02":"#c6c6c6","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g90:{"--cu-background":"#262626","--cu-layer-01":"#393939","--cu-layer-02":"#525252","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#c6c6c6","--cu-border-subtle":"#6f6f6f","--cu-border-subtle-02":"#8d8d8d","--cu-axis":"#8d8d8d","--cu-interactive":"#4589ff","--cu-support-error":"#ff8389","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.09)"},g100:{"--cu-background":"#161616","--cu-layer-01":"#262626","--cu-layer-02":"#393939","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#a8a8a8","--cu-border-subtle":"#525252","--cu-border-subtle-02":"#6f6f6f","--cu-axis":"#6f6f6f","--cu-interactive":"#4589ff","--cu-support-error":"#fa4d56","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.07)"}},r="IBM Plex Sans, sans-serif",o="IBM Plex Mono, monospace",s="cu-ibm-plex-fonts";function a(){if(document.getElementById(s))return;const e=document.createElement("link");e.rel="preconnect",e.href="https://fonts.googleapis.com";const t=document.createElement("link");t.id=s,t.rel="stylesheet",t.href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@300;400&display=swap",document.head.appendChild(e),document.head.appendChild(t)}const c={"cds--white":"white","cds--g10":"g10","cds--g90":"g90","cds--g100":"g100"},i=["#4589ff","#3ddbd9","#be95ff","#42be65","#ff832b","#f1c21b","#ff8389"];function l(e={}){const t=u("--cu-axis"),n=u("--cu-grid");return{stroke:t,ticks:{stroke:n,width:1},grid:{stroke:n,width:1},font:`11px ${o}`,...e}}function u(e){const t=getComputedStyle(document.documentElement),r=n[function(){const e=Object.keys(c).find(e=>document.documentElement.classList.contains(e));return c[e]??"white"}()];return t.getPropertyValue(e).trim()||r[e]||""}const d="cu-theme-change",p="cu-chart-recreated";function f(e,t=document.documentElement){const r=n[e];if(!r)throw new Error(`carbon-uplot: unknown theme "${e}". Available: ${Object.keys(n).join(", ")}`);Object.entries(r).forEach(([e,n])=>t.style.setProperty(e,n)),document.dispatchEvent(new CustomEvent(d,{detail:{name:e}}))}function m(e){return document.addEventListener(d,e),()=>document.removeEventListener(d,e)}const h=Symbol("carbonSeriesColors"),g={stroke:"transparent",fill:"transparent",paths:()=>null};function x(e,t){return Array.from({length:e},(e,n)=>(t[n]??{}).color??i[n%i.length])}function b(e,t){const{plugins:n=[],...r}=t;return{plugins:[...e,...n],restOptions:r}}function y(t,n,r,o){const s=t.getBoundingClientRect().width||t.clientWidth||300,a=t.clientHeight||170,c=new e({width:s,height:a,background:"transparent",padding:[8,8,0,0],legend:{show:!1},cursor:{show:!0,drag:{x:!0,y:!1,uni:10}},...n},r,t),i=new ResizeObserver(e=>{const n=e[0]?.contentRect.width;n>0&&c.setSize({width:n,height:t.clientHeight})});i.observe(t);const l=c.destroy.bind(c);let u=null;return o&&(u=m(()=>{i.disconnect(),u(),l();const e=o(t);e&&t.dispatchEvent(new CustomEvent(p,{detail:{chart:e}}))})),c.destroy=()=>{i.disconnect(),u&&u(),l()},c}const v={display:"flex",flexWrap:"wrap",gap:"12px"},w={marginTop:"8px",paddingTop:"8px",borderTop:"0.5px solid var(--cu-border-subtle)"},E={marginBottom:"8px",paddingBottom:"8px",borderBottom:"0.5px solid var(--cu-border-subtle)"},C={display:"flex",alignItems:"center",gap:"5px",fontSize:"11px",fontFamily:"inherit",color:"var(--cu-text-secondary)",background:"none",border:"none",padding:"0",cursor:"pointer"},k={width:"16px",height:"2px",flexShrink:"0"};function F(e,t){Object.assign(e.style,t)}function S(e,t,n,r){if(!1===r)return;const o=t.map(e=>e?.label);o.some(Boolean)&&M(e,o,n,"top"===r?"top":"bottom")}function M(e,t,n,r="bottom"){const o=e[h]??[],s=document.createElement("div"),a=[];return F(s,v),F(s,"top"===r?E:w),t.forEach((t,n)=>{if(!t)return;const{item:r,handler:c}=function(e,t,n,r){const o=document.createElement("button"),s=document.createElement("span"),a=$(n);a.chart=e,r&&(s.style.background=r);return F(o,C),F(s,k),o.appendChild(s),o.appendChild(document.createTextNode(t)),o.addEventListener("click",a),{item:o,handler:a}}(e,t,n+1,o[n]);s.appendChild(r),a.push([r,c])}),n.insertAdjacentElement("top"===r?"beforebegin":"afterend",s),e.hooks.destroy=e.hooks.destroy??[],e.hooks.destroy.push(()=>{a.forEach(([e,t])=>e.removeEventListener("click",t)),s.remove()}),s}const O=new WeakMap;function j(e,t){const n=e[h]??[],r=e.root.parentElement;Array.from(t.children).forEach((t,r)=>{const o=r+1,s=n[r],a=t.firstElementChild;let c=O.get(t);s&&a&&(a.style.background=s),c||(c=$(o),O.set(t,c),t.addEventListener("click",c)),c.chart=e}),r.addEventListener(p,e=>{j(e.detail.chart,t)},{once:!0})}function $(e){return{chart:null,handleEvent(t){const n=!1!==this.chart.series[e].show;this.chart.setSeries(e,{show:!n}),t.currentTarget.style.opacity=n?"0.3":""}}}const A="cu-tooltip__row";function L(){if(document.getElementById("cu-tooltip-styles"))return;const e=document.createElement("style");e.id="cu-tooltip-styles",e.textContent=`.${A}:not(:last-child) { border-bottom: 1px solid var(--cu-grid); }`,document.head.appendChild(e)}const z={position:"absolute",pointerEvents:"none",background:"var(--cu-tooltip-bg, var(--cu-background))",boxShadow:"0 2px 6px rgba(0, 0, 0, 0.3)",fontSize:"12px",fontFamily:r,color:"var(--cu-text-primary)",minWidth:"160px",zIndex:"100",display:"none"},I={padding:"8px 12px 6px",borderBottom:"1px solid var(--cu-grid)",fontFamily:o,fontSize:"11px",color:"var(--cu-text-primary)"},P={display:"flex",alignItems:"center",justifyContent:"space-between",gap:"24px",padding:"5px 12px 5px 9px"},T={fontFamily:o,fontSize:"11px",color:"var(--cu-text-primary)"};function B({colors:e,isTimeScale:t=!1,xFormat:n,valueFormat:r}={}){let o,s,a;return{hooks:{init:function(t){L(),o=document.createElement("div"),s=document.createElement("div"),Object.assign(o.style,z),Object.assign(s.style,I),o.appendChild(s),a=t.series.slice(1).map((t,n)=>{const r=e[n],s=document.createElement("div"),a=document.createElement("span"),c=document.createElement("span");return s.className=A,Object.assign(s.style,P),s.style.borderLeft=`3px solid ${r}`,a.textContent=null!=t.label?`${t.label} `:`Series ${n+1} `,Object.assign(c.style,T),s.appendChild(a),s.appendChild(c),o.appendChild(s),{row:s,valueEl:c,seriesIndex:n+1}}),o.style.bottom="8px",t.over.appendChild(o),t.over.addEventListener("mouseleave",()=>{o.style.display="none"}),t.over.addEventListener("mouseenter",()=>{o.style.display=null})},setCursor:function(e){const{left:c,idx:i}=e.cursor,l=e.over.getBoundingClientRect(),u=o.offsetWidth,d=l.left+c+16+u>window.innerWidth;null==i||c<0?o.style.display="none":(o.style.display=null,s.textContent=R(e.data[0][i],t,n),a.forEach(({row:t,valueEl:n,seriesIndex:o})=>{const s=e.series[o],a=e.data[o][i];s?.show?(t.style.display=null,n.textContent=null==a?"—":W(a,r)):t.style.display="none"}),o.style.left=d?c-16-u+"px":`${c+16}px`)}}}}function R(e,t,n){if(n)return n(e);if(t){const t=new Date(1e3*e),n=e=>String(e).padStart(2,"0");return`${t.getFullYear()}-${n(t.getMonth()+1)}-${n(t.getDate())} ${n(t.getHours())}:${n(t.getMinutes())}`}return String(e)}function W(e,t){return t?t(e):e.toLocaleString()}function D(e,t){const{series:n=[],data:r,yRange:o,legend:s=!0,tooltip:a=!0,valueFormat:c,xFormat:i,...u}=t,d=x(r.length-1,n),{plugins:p,restOptions:f}=b(function(e,t,n,r){return!1!==t?[B({colors:e,isTimeScale:!0,valueFormat:n,xFormat:r})]:[]}(d,a,c,i),u),m=y(e,{axes:[l(),V(c)],plugins:p,series:H(d,n),scales:{x:{time:!0},y:{range:o}},...f},r,()=>D(e,t));return m[h]=d,S(m,n,e,s),m}function V(e){return e?l({values:(t,n)=>n.map(t=>null==t?"":e(t)),size:(e,t)=>t?7*Math.max(...t.map(e=>e.length))+12:40}):l()}function H(e,t){return[{},...e.map((e,n)=>{const{label:r,width:o,color:s,...a}=t[n]??{};return{label:r,stroke:e,width:o??2,...a}})]}function N(e,t){const{series:n=[],data:r,yRange:o,legend:s=!0,tooltip:a=!0,valueFormat:c,xFormat:i,...u}=t,d=x(r.length-1,n),{plugins:p,restOptions:f}=b(function(e,t,n,r){return!1!==t?[B({colors:e,isTimeScale:!0,valueFormat:n,xFormat:r})]:[]}(d,a,c,i),u),m=y(e,{axes:[l(),l()],plugins:p,series:_(d,n),scales:{x:{time:!0},y:{range:o}},...f},r,()=>N(e,t));return m[h]=d,S(m,n,e,s),m}function _(e,t){return[{},...e.map((e,n)=>{const{label:r,width:o,color:s,...a}=t[n]??{};return{label:r,stroke:e,fill:e+"28",width:o??2,...a}})]}function Y(e,t){const{series:n=[],data:r,yRange:o,xFormat:s,legend:a=!0,tooltip:c=!0,valueFormat:i,...l}=t,u=x(r.length-1,n),{plugins:d,restOptions:p}=b(function(e,t,n,r){return!1!==t?[B({colors:e,isTimeScale:!0,xFormat:n,valueFormat:r})]:[]}(u,c,s,i),l),f=y(e,{axes:[q(s),G(i)],plugins:d,series:K(u,n),scales:{x:{time:!0,range:J(r)},y:{range:o}},...p},r,()=>Y(e,t));return f[h]=u,S(f,n,e,a),f}function q(e){return l({values:e?(t,n)=>n.map(e):void 0})}function G(e){return e?l({values:(t,n)=>n.map(t=>null==t?"":e(t)),size:(e,t)=>t?7*Math.max(...t.map(e=>e.length))+12:40}):l()}function J(e){return(t,n,r)=>{const o=e[0].length,s=(r-n)/(o-1)/2;return o<=1?[n,r]:[n-s,r+s]}}function K(t,n){return[{},...t.map((t,r)=>({label:n[r]?.label,fill:t,width:0,paths:e.paths.bars({size:[.6,18,1]}),points:(n[r]??{}).points??{show:!1}}))]}const Q=`11px ${r}`;function U(e,t){const{series:n=[],data:r,xRange:o,yRange:s,xLabel:a,yLabel:c,legend:i=!0,...u}=t,d=r.length-1,p=x(d,n),{plugins:f,restOptions:m}=b([(g=p,{hooks:{drawSeries:[Z.bind(null,g)]}})],u);var g;const v=y(e,{axes:[l({label:a,labelFont:Q}),l({label:c,labelFont:Q})],plugins:f,series:X(d),scales:{x:{time:!1,range:o},y:{range:s}},...m},r,()=>U(e,t));return v[h]=p,S(v,n,e,i),v}function X(e){return[{},...Array.from({length:e},()=>g)]}function Z(e,t,n){const r=t.ctx,o=e[n-1]+"cc";r.save(),r.fillStyle=o,t.data[n].forEach((e,n)=>{r.beginPath(),r.arc(t.valToPos(t.data[0][n],"x",!0),t.valToPos(e,"y",!0),3.5,0,2*Math.PI),r.fill()}),r.restore()}const ee="var(--cu-interactive)",te="var(--cu-support-success)",ne="var(--cu-border-subtle)",re="var(--cu-text-primary)",oe="var(--cu-text-secondary)",se="var(--cu-text-helper)";function ae(e){return`var(--cu-support-${e})`}const ce=90,ie=14;const le=Math.PI,ue=130,de=134;function pe(e,{value:t=0,status:n,ticks:s=!0,thresholds:a=[],min:c=0,max:i=100,label:l,valueFormat:u,color:d}={}){const{svg:p,arcEl:f,valueLabelEl:m}=function(e,t,n,s){const a=me("svg",{viewBox:"0 0 260 148",width:"100%"}),c=me("path",{"stroke-width":ie,fill:"none"}),i=me("text",{x:ue,y:114,"text-anchor":"middle","dominant-baseline":"middle",fill:re,"font-size":36,"font-weight":300,"font-family":r});a.appendChild(function(){return me("path",{d:fe(),stroke:ne,"stroke-width":ie,fill:"none"})}()),a.appendChild(c),e&&function(e,t){const n=t-e;return[0,.25,.5,.75,1].map(t=>e+t*n)}(t,n).forEach(e=>function(e,t,n,r){const s=(t-n)/(r-n),a=le+s*Math.PI,c=79,i=101,l=113,u=Math.cos(a),d=Math.sin(a),p=me("text",{x:(ue+l*u).toFixed(3),y:(de+l*d).toFixed(3),"text-anchor":"middle","dominant-baseline":"middle",fill:se,"font-size":10,"font-family":o});e.appendChild(me("line",{x1:(ue+c*u).toFixed(3),y1:(de+c*d).toFixed(3),x2:(ue+i*u).toFixed(3),y2:(de+i*d).toFixed(3),stroke:se,"stroke-width":1.5})),p.textContent=t.toLocaleString(),e.appendChild(p)}(a,e,t,n));a.appendChild(i),s&&a.appendChild(function(e){const t=me("text",{x:ue,y:144,"text-anchor":"middle","dominant-baseline":"middle",fill:oe,"font-size":12,"font-family":r});return t.textContent=e,t}(s));return{svg:a,arcEl:c,valueLabelEl:i}}(s,c,i,l);function h({value:e,status:t}={}){f.setAttribute("d",function(e,t,n){const r=(e-t)/(n-t),o=le+r*Math.PI,s=(ue+ce*Math.cos(o)).toFixed(3),a=(de+ce*Math.sin(o)).toFixed(3);return r<=0?"":r>=1?fe():`M 40 134 A 90 90 0 0 1 ${s} ${a}`}(e,c,i)),f.setAttribute("stroke",d??function(e,t,n){if(t)return ae(t);if(!n?.length)return ee;const r=n.reduce((t,n)=>e>=n.value?n:t,null);return r?ae(r.status):ee}(e,t??n,a)),m.textContent=u?u(e):e}return e.appendChild(p),h({value:t}),{setValue:h,destroy:function(){p.remove()}}}function fe(){return["M 40 134","A 90 90 0 0 1 130 44","A 90 90 0 0 1 220 134"].join(" ")}function me(e,t){const n=document.createElementNS("http://www.w3.org/2000/svg",e);return Object.entries(t).forEach(([e,t])=>n.setAttribute(e,t)),n}const he={sm:"1.25rem",md:"2.5rem",lg:"5rem"};function ge(e,{value:t=0,data:n,label:o,valueFormat:s,showValue:a=!0,sparkline:c=!0,color:l,size:u="md",align:d="left",verticalAlign:p="top"}={}){const f=l??i[0],m=function(e){const t=document.createElement("div");return Object.assign(t.style,{display:"flex",flexDirection:"column",width:"100%",height:"100%",overflow:"hidden",justifyContent:"center"===e?"center":"flex-start"}),t}(p);e.appendChild(m);const h=a?function(e,t,n,o,s){const a=document.createElement("div"),c=document.createElement("div");if(Object.assign(a.style,{padding:"1rem 1rem 0.5rem",display:"flex",flexDirection:"column",gap:"0.25rem"}),Object.assign(c.style,{fontSize:he[o],fontWeight:"300",lineHeight:"1",fontFamily:r,color:t,textAlign:s}),a.appendChild(c),n){const e=document.createElement("div");Object.assign(e.style,{fontSize:"0.75rem",fontFamily:r,color:oe,textAlign:s}),e.textContent=n,a.appendChild(e)}return e.appendChild(a),c}(m,f,o,u,d):null;let g=n?[n[0].slice(),n[1].slice()]:null;const x=g&&g[0].length>1?g[0].at(-1)-g[0].at(-2):1;let b=null;if(c&&g){const e=function(e){const t=document.createElement("div");return Object.assign(t.style,{flex:"1",minHeight:"64px"}),e.appendChild(t),t}(m);b=function(e,t,n){const r=[{},{stroke:n,fill:n+"28",width:1.5,points:{show:!1}}];return y(e,{cursor:{show:!1},axes:[{show:!1},{show:!1}],padding:[4,0,4,0],series:r,scales:{x:{time:!0}}},t,null)}(e,g,f)}return h&&(h.textContent=s?s(t):t),{setValue:function({value:e}={}){h&&(h.textContent=s?s(e):e),b&&g&&(g[0].push(g[0].at(-1)+x),g[1].push(e),g[0].shift(),g[1].shift(),b.setData(g))}}}const xe=.08;function be(e,t){const{data:n,bucketLabels:r,color:o,xTime:s=!0,tooltip:a=!0,valueFormat:c,...u}=t,d=o??i[0],p=n.length-1,f=function(e){let t=0;return e.slice(1).forEach(e=>{e.forEach(e=>{null!=e&&e>t&&(t=e)})}),t||1}(n),m=function(e){if(!e.startsWith("#"))return[69,137,255];const t=e.slice(1),n=3===t.length?t.split("").map(e=>e+e).join(""):t;return[parseInt(n.slice(0,2),16),parseInt(n.slice(2,4),16),parseInt(n.slice(4,6),16)]}(d),h=function(e,t,n){const r=e.slice(1);function o(o){const s=o.ctx,[a,c,i]=t;s.save(),s.beginPath(),s.rect(o.bbox.left,o.bbox.top,o.bbox.width,o.bbox.height),s.clip(),e[0].forEach((t,l)=>{const u=Math.round(o.valToPos(t,"x",!0)),d=e[0][l+1],p=void 0!==d?Math.round(o.valToPos(d,"x",!0)):Math.round(o.bbox.left+o.bbox.width),f=Math.max(1,p-u);r.forEach((e,t)=>{const r=e[l];if(!r)return;const d=xe+.92*(r/n);s.fillStyle=`rgba(${a}, ${c}, ${i}, ${d.toFixed(2)})`;const p=Math.round(o.valToPos(t+1,"y",!0)),m=Math.round(o.valToPos(t,"y",!0)),h=Math.max(1,m-p);s.fillRect(u,p,f,h)})}),s.restore()}return{hooks:{draw:[o]}}}(n,m,f),g=!1!==a?function(e,t,n,r,o,s){let a,c,i,l,u;return{hooks:{init:function(e){L(),a=document.createElement("div"),c=document.createElement("div"),i=document.createElement("div"),l=document.createElement("span"),u=document.createElement("span"),Object.assign(a.style,z),Object.assign(c.style,I),Object.assign(i.style,P),Object.assign(u.style,T),i.className=A,i.appendChild(l),i.appendChild(u),a.appendChild(c),a.appendChild(i),e.over.appendChild(a),e.over.addEventListener("mouseleave",()=>{a.style.display="none"}),e.over.addEventListener("mouseenter",()=>{a.style.display=null})},setCursor:function(d){const{left:p,top:f,idx:m}=d.cursor,h=e.length-1;if(null==m||p<0)return void(a.style.display="none");const g=d.posToVal(f,"y"),x=Math.max(0,Math.min(Math.floor(g),h-1)),b=e[x+1][m],y=xe+.92*(null!=b?b/s:0),[v,w,E]=o;c.textContent=R(e[0][m],n,null),l.textContent=t?t[x]??`Row ${x}`:`Row ${x}`,u.textContent=null==b?"—":W(b,r),i.style.borderLeft=`3px solid rgba(${v}, ${w}, ${E}, ${y.toFixed(2)})`;const C=d.over.getBoundingClientRect(),k=a.offsetWidth,F=C.left+p+16+k>window.innerWidth;a.style.display=null,a.style.left=F?p-16-k+"px":`${p+16}px`,a.style.top=f-20+"px"}}}}(n,r,s,c,m,f):null,x=g?[h,g]:[h],{plugins:v,restOptions:w}=b(x,u);return y(e,{plugins:v,series:ye(p),axes:[l(),ve(r,p)],scales:{x:{time:s},y:{range:[0,p]}},cursor:{x:!1,y:!1},...w},n,()=>be(e,t))}function ye(e){return[{},...Array.from({length:e},()=>g)]}function ve(e,t){const n=Array.from({length:t},(e,t)=>t+.5);return l({splits:()=>n,values:(t,n)=>n.map((t,n)=>e?e[n]??"":String(n)),size:(e,t)=>t?7*Math.max(...t.map(e=>e?e.length:0))+12:40})}function we(e,{series:t=[],min:n=0,max:s=100,color:a,thresholds:c=[],inverted:i=!1,valueFormat:l}={}){const u=function(){const e=document.createElement("div");return Object.assign(e.style,{display:"flex",flexDirection:"column",gap:"12px",padding:"1rem",width:"100%",boxSizing:"border-box"}),e}(),d=t.map(function(e,t){const a=function(e,t,n,s){const a=document.createElement("div"),c=document.createElement("span"),i=document.createElement("div"),l=document.createElement("div"),u=document.createElement("span");return Object.assign(a.style,{display:"grid",gridTemplateColumns:"minmax(0, max-content) 1fr max-content",alignItems:"center",gap:"12px"}),Object.assign(c.style,{fontSize:"12px",fontFamily:r,color:re,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"140px"}),Object.assign(i.style,{height:"8px",background:ne,borderRadius:"2px",overflow:"hidden"}),Object.assign(l.style,{height:"100%",borderRadius:"2px",transition:"width 0.2s ease, background 0.2s ease"}),Object.assign(u.style,{fontSize:"11px",fontFamily:o,color:re,minWidth:"40px",textAlign:"right",whiteSpace:"nowrap"}),c.title=t.label??"",c.textContent=t.label??"",i.setAttribute("role","meter"),i.setAttribute("aria-label",t.label??""),i.setAttribute("aria-valuemin",n),i.setAttribute("aria-valuemax",s),i.appendChild(l),a.appendChild(c),a.appendChild(i),a.appendChild(u),e.appendChild(a),{fillEl:l,valueEl:u,trackEl:i}}(u,e,n,s),c=e.value??0;return p(a,t,c,e.status),a});function p(e,r,o,u){const d=Math.max(0,Math.min((o-n)/(s-n),1)),p=function(e,t,n,r,o,s){const a=o??t?.status;return t?.color?t.color:n||("good"===a?te:a?ae(a):r.length?s?function(e,t){const n=t.find(t=>e<t.value)??null;return n?ae(n.status):te}(e,r):function(e,t){const n=t.reduce((t,n)=>e>=n.value?n:t,null);return n?ae(n.status):te}(e,r):ee)}(o,t[r],a,c,u,i);e.fillEl.style.width=100*d+"%",e.fillEl.style.background=p,e.valueEl.textContent=l?l(o):o.toLocaleString(),e.trackEl.setAttribute("aria-valuenow",o)}return e.appendChild(u),{setValue:function(e,{value:t,status:n}={}){const r=d[e];r&&p(r,e,t,n)}}}export{p as CHART_RECREATED_EVENT,n as THEMES,j as bindLegend,N as createAreaChart,l as createAxisConfig,Y as createBarChart,we as createBarGauge,pe as createGauge,be as createHeatmap,M as createLegend,D as createLineChart,U as createScatterChart,ge as createStat,B as createTooltipPlugin,a as loadFonts,m as onThemeChange,f as setTheme};

package/dist/react.cjs.js

@@ -0,0 +1 @@
+"use strict";var e=require("react"),t=require("uplot");const n="cu-styles";if(!document.getElementById(n)){const e=document.createElement("style");e.id=n,e.textContent=":root {\n  --cu-background: var(--cds-background, #ffffff);\n  --cu-layer-01: var(--cds-layer-01, #f4f4f4);\n  --cu-layer-02: var(--cds-layer-02, #ffffff);\n  --cu-text-primary: var(--cds-text-primary, #161616);\n  --cu-text-secondary: var(--cds-text-secondary, #525252);\n  --cu-text-helper: var(--cds-text-helper, #6f6f6f);\n  --cu-border-subtle: var(--cds-border-subtle-01, #c6c6c6);\n  --cu-border-subtle-02: var(--cds-border-subtle-02, #e0e0e0);\n  --cu-axis: var(--cds-border-strong-01, #8d8d8d);\n  --cu-interactive: var(--cds-interactive, #0f62fe);\n  --cu-support-error: var(--cds-support-error, #da1e28);\n  --cu-support-warning: var(--cds-support-warning, #f1c21b);\n  --cu-support-success: var(--cds-support-success, #24a148);\n  --cu-support-info: var(--cds-support-info, #0043ce);\n  --cu-layer: var(--cu-layer-01);\n  --cu-grid: rgba(0,0,0,0.07);\n}\n\n.cds--g90 {\n  --cu-grid: rgba(255,255,255,0.09);\n}\n\n.cds--g100 {\n  --cu-grid: rgba(255,255,255,0.07);\n}\n\n.cds--tile {\n  --cu-tooltip-bg: var(--cu-layer-01);\n}\n\n.u-select {\n  background: rgba(15, 98, 254, 0.1);\n  border-left: 1px solid rgba(15, 98, 254, 0.5);\n  border-right: 1px solid rgba(15, 98, 254, 0.5);\n}\n\n.cds--g90 .u-select,\n.cds--g100 .u-select {\n  background: rgba(69, 137, 255, 0.2);\n  border-left: 1px solid rgba(69, 137, 255, 0.65);\n  border-right: 1px solid rgba(69, 137, 255, 0.65);\n}\n",document.head.appendChild(e)}const r={white:{"--cu-background":"#ffffff","--cu-layer-01":"#f4f4f4","--cu-layer-02":"#ffffff","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#c6c6c6","--cu-border-subtle-02":"#e0e0e0","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g10:{"--cu-background":"#f4f4f4","--cu-layer-01":"#ffffff","--cu-layer-02":"#f4f4f4","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#e0e0e0","--cu-border-subtle-02":"#c6c6c6","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g90:{"--cu-background":"#262626","--cu-layer-01":"#393939","--cu-layer-02":"#525252","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#c6c6c6","--cu-border-subtle":"#6f6f6f","--cu-border-subtle-02":"#8d8d8d","--cu-axis":"#8d8d8d","--cu-interactive":"#4589ff","--cu-support-error":"#ff8389","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.09)"},g100:{"--cu-background":"#161616","--cu-layer-01":"#262626","--cu-layer-02":"#393939","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#a8a8a8","--cu-border-subtle":"#525252","--cu-border-subtle-02":"#6f6f6f","--cu-axis":"#6f6f6f","--cu-interactive":"#4589ff","--cu-support-error":"#fa4d56","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.07)"}},o="IBM Plex Sans, sans-serif",a="IBM Plex Mono, monospace",s={"cds--white":"white","cds--g10":"g10","cds--g90":"g90","cds--g100":"g100"},l=["#4589ff","#3ddbd9","#be95ff","#42be65","#ff832b","#f1c21b","#ff8389"];function c(e={}){const t=i("--cu-axis"),n=i("--cu-grid");return{stroke:t,ticks:{stroke:n,width:1},grid:{stroke:n,width:1},font:`11px ${a}`,...e}}function i(e){const t=getComputedStyle(document.documentElement),n=r[function(){const e=Object.keys(s).find(e=>document.documentElement.classList.contains(e));return s[e]??"white"}()];return t.getPropertyValue(e).trim()||n[e]||""}const u="cu-theme-change",d="cu-chart-recreated";const f=Symbol("carbonSeriesColors"),p={stroke:"transparent",fill:"transparent",paths:()=>null};function m(e,t){return Array.from({length:e},(e,n)=>(t[n]??{}).color??l[n%l.length])}function h(e,t){const{plugins:n=[],...r}=t;return{plugins:[...e,...n],restOptions:r}}function g(e,n,r,o){const a=e.getBoundingClientRect().width||e.clientWidth||300,s=e.clientHeight||170,l=new t({width:a,height:s,background:"transparent",padding:[8,8,0,0],legend:{show:!1},cursor:{show:!0,drag:{x:!0,y:!1,uni:10}},...n},r,e),c=new ResizeObserver(t=>{const n=t[0]?.contentRect.width;n>0&&l.setSize({width:n,height:e.clientHeight})});c.observe(e);const i=l.destroy.bind(l);let f=null;var p;return o&&(p=()=>{c.disconnect(),f(),i();const t=o(e);t&&e.dispatchEvent(new CustomEvent(d,{detail:{chart:t}}))},document.addEventListener(u,p),f=()=>document.removeEventListener(u,p)),l.destroy=()=>{c.disconnect(),f&&f(),i()},l}const x={display:"flex",flexWrap:"wrap",gap:"12px"},b={marginTop:"8px",paddingTop:"8px",borderTop:"0.5px solid var(--cu-border-subtle)"},y={marginBottom:"8px",paddingBottom:"8px",borderBottom:"0.5px solid var(--cu-border-subtle)"},v={display:"flex",alignItems:"center",gap:"5px",fontSize:"11px",fontFamily:"inherit",color:"var(--cu-text-secondary)",background:"none",border:"none",padding:"0",cursor:"pointer"},w={width:"16px",height:"2px",flexShrink:"0"};function E(e,t){Object.assign(e.style,t)}function C(e,t,n,r){if(!1===r)return;const o=t.map(e=>e?.label);o.some(Boolean)&&function(e,t,n,r="bottom"){const o=e[f]??[],a=document.createElement("div"),s=[];E(a,x),E(a,"top"===r?y:b),t.forEach((t,n)=>{if(!t)return;const{item:r,handler:l}=function(e,t,n,r){const o=document.createElement("button"),a=document.createElement("span"),s=k(n);s.chart=e,r&&(a.style.background=r);return E(o,v),E(a,w),o.appendChild(a),o.appendChild(document.createTextNode(t)),o.addEventListener("click",s),{item:o,handler:s}}(e,t,n+1,o[n]);a.appendChild(r),s.push([r,l])}),n.insertAdjacentElement("top"===r?"beforebegin":"afterend",a),e.hooks.destroy=e.hooks.destroy??[],e.hooks.destroy.push(()=>{s.forEach(([e,t])=>e.removeEventListener("click",t)),a.remove()})}(e,o,n,"top"===r?"top":"bottom")}const F=new WeakMap;function k(e){return{chart:null,handleEvent(t){const n=!1!==this.chart.series[e].show;this.chart.setSeries(e,{show:!n}),t.currentTarget.style.opacity=n?"0.3":""}}}const R="cu-tooltip__row";function S(){if(document.getElementById("cu-tooltip-styles"))return;const e=document.createElement("style");e.id="cu-tooltip-styles",e.textContent=`.${R}:not(:last-child) { border-bottom: 1px solid var(--cu-grid); }`,document.head.appendChild(e)}const M={position:"absolute",pointerEvents:"none",background:"var(--cu-tooltip-bg, var(--cu-background))",boxShadow:"0 2px 6px rgba(0, 0, 0, 0.3)",fontSize:"12px",fontFamily:o,color:"var(--cu-text-primary)",minWidth:"160px",zIndex:"100",display:"none"},O={padding:"8px 12px 6px",borderBottom:"1px solid var(--cu-grid)",fontFamily:a,fontSize:"11px",color:"var(--cu-text-primary)"},L={display:"flex",alignItems:"center",justifyContent:"space-between",gap:"24px",padding:"5px 12px 5px 9px"},j={fontFamily:a,fontSize:"11px",color:"var(--cu-text-primary)"};function $({colors:e,isTimeScale:t=!1,xFormat:n,valueFormat:r}={}){let o,a,s;return{hooks:{init:function(t){S(),o=document.createElement("div"),a=document.createElement("div"),Object.assign(o.style,M),Object.assign(a.style,O),o.appendChild(a),s=t.series.slice(1).map((t,n)=>{const r=e[n],a=document.createElement("div"),s=document.createElement("span"),l=document.createElement("span");return a.className=R,Object.assign(a.style,L),a.style.borderLeft=`3px solid ${r}`,s.textContent=null!=t.label?`${t.label} `:`Series ${n+1} `,Object.assign(l.style,j),a.appendChild(s),a.appendChild(l),o.appendChild(a),{row:a,valueEl:l,seriesIndex:n+1}}),o.style.bottom="8px",t.over.appendChild(o),t.over.addEventListener("mouseleave",()=>{o.style.display="none"}),t.over.addEventListener("mouseenter",()=>{o.style.display=null})},setCursor:function(e){const{left:l,idx:c}=e.cursor,i=e.over.getBoundingClientRect(),u=o.offsetWidth,d=i.left+l+16+u>window.innerWidth;null==c||l<0?o.style.display="none":(o.style.display=null,a.textContent=A(e.data[0][c],t,n),s.forEach(({row:t,valueEl:n,seriesIndex:o})=>{const a=e.series[o],s=e.data[o][c];a?.show?(t.style.display=null,n.textContent=null==s?"—":z(s,r)):t.style.display="none"}),o.style.left=d?l-16-u+"px":`${l+16}px`)}}}}function A(e,t,n){if(n)return n(e);if(t){const t=new Date(1e3*e),n=e=>String(e).padStart(2,"0");return`${t.getFullYear()}-${n(t.getMonth()+1)}-${n(t.getDate())} ${n(t.getHours())}:${n(t.getMinutes())}`}return String(e)}function z(e,t){return t?t(e):e.toLocaleString()}function N(e,t){const{series:n=[],data:r,yRange:o,legend:a=!0,tooltip:s=!0,valueFormat:l,xFormat:i,...u}=t,d=m(r.length-1,n),{plugins:p,restOptions:x}=h(function(e,t,n,r){return!1!==t?[$({colors:e,isTimeScale:!0,valueFormat:n,xFormat:r})]:[]}(d,s,l,i),u),b=g(e,{axes:[c(),T(l)],plugins:p,series:I(d,n),scales:{x:{time:!0},y:{range:o}},...x},r,()=>N(e,t));return b[f]=d,C(b,n,e,a),b}function T(e){return e?c({values:(t,n)=>n.map(t=>null==t?"":e(t)),size:(e,t)=>t?7*Math.max(...t.map(e=>e.length))+12:40}):c()}function I(e,t){return[{},...e.map((e,n)=>{const{label:r,width:o,color:a,...s}=t[n]??{};return{label:r,stroke:e,width:o??2,...s}})]}function B(e,t){const{series:n=[],data:r,yRange:o,legend:a=!0,tooltip:s=!0,valueFormat:l,xFormat:i,...u}=t,d=m(r.length-1,n),{plugins:p,restOptions:x}=h(function(e,t,n,r){return!1!==t?[$({colors:e,isTimeScale:!0,valueFormat:n,xFormat:r})]:[]}(d,s,l,i),u),b=g(e,{axes:[c(),c()],plugins:p,series:P(d,n),scales:{x:{time:!0},y:{range:o}},...x},r,()=>B(e,t));return b[f]=d,C(b,n,e,a),b}function P(e,t){return[{},...e.map((e,n)=>{const{label:r,width:o,color:a,...s}=t[n]??{};return{label:r,stroke:e,fill:e+"28",width:o??2,...s}})]}function W(e,t){const{series:n=[],data:r,yRange:o,xFormat:a,legend:s=!0,tooltip:l=!0,valueFormat:c,...i}=t,u=m(r.length-1,n),{plugins:d,restOptions:p}=h(function(e,t,n,r){return!1!==t?[$({colors:e,isTimeScale:!0,xFormat:n,valueFormat:r})]:[]}(u,l,a,c),i),x=g(e,{axes:[V(a),H(c)],plugins:d,series:q(u,n),scales:{x:{time:!0,range:D(r)},y:{range:o}},...p},r,()=>W(e,t));return x[f]=u,C(x,n,e,s),x}function V(e){return c({values:e?(t,n)=>n.map(e):void 0})}function H(e){return e?c({values:(t,n)=>n.map(t=>null==t?"":e(t)),size:(e,t)=>t?7*Math.max(...t.map(e=>e.length))+12:40}):c()}function D(e){return(t,n,r)=>{const o=e[0].length,a=(r-n)/(o-1)/2;return o<=1?[n,r]:[n-a,r+a]}}function q(e,n){return[{},...e.map((e,r)=>({label:n[r]?.label,fill:e,width:0,paths:t.paths.bars({size:[.6,18,1]}),points:(n[r]??{}).points??{show:!1}}))]}const G=`11px ${o}`;function _(e,t){const{series:n=[],data:r,xRange:o,yRange:a,xLabel:s,yLabel:l,legend:i=!0,...u}=t,d=r.length-1,p=m(d,n),{plugins:x,restOptions:b}=h([(y=p,{hooks:{drawSeries:[J.bind(null,y)]}})],u);var y;const v=g(e,{axes:[c({label:s,labelFont:G}),c({label:l,labelFont:G})],plugins:x,series:Y(d),scales:{x:{time:!1,range:o},y:{range:a}},...b},r,()=>_(e,t));return v[f]=p,C(v,n,e,i),v}function Y(e){return[{},...Array.from({length:e},()=>p)]}function J(e,t,n){const r=t.ctx,o=e[n-1]+"cc";r.save(),r.fillStyle=o,t.data[n].forEach((e,n)=>{r.beginPath(),r.arc(t.valToPos(t.data[0][n],"x",!0),t.valToPos(e,"y",!0),3.5,0,2*Math.PI),r.fill()}),r.restore()}const K="var(--cu-interactive)",Q="var(--cu-support-success)",U="var(--cu-border-subtle)",X="var(--cu-text-primary)",Z="var(--cu-text-secondary)",ee="var(--cu-text-helper)";function te(e){return`var(--cu-support-${e})`}const ne=90,re=14;const oe=Math.PI,ae=130,se=134;function le(e,{value:t=0,status:n,ticks:r=!0,thresholds:s=[],min:l=0,max:c=100,label:i,valueFormat:u,color:d}={}){const{svg:f,arcEl:p,valueLabelEl:m}=function(e,t,n,r){const s=ie("svg",{viewBox:"0 0 260 148",width:"100%"}),l=ie("path",{"stroke-width":re,fill:"none"}),c=ie("text",{x:ae,y:114,"text-anchor":"middle","dominant-baseline":"middle",fill:X,"font-size":36,"font-weight":300,"font-family":o});s.appendChild(function(){return ie("path",{d:ce(),stroke:U,"stroke-width":re,fill:"none"})}()),s.appendChild(l),e&&function(e,t){const n=t-e;return[0,.25,.5,.75,1].map(t=>e+t*n)}(t,n).forEach(e=>function(e,t,n,r){const o=(t-n)/(r-n),s=oe+o*Math.PI,l=79,c=101,i=113,u=Math.cos(s),d=Math.sin(s),f=ie("text",{x:(ae+i*u).toFixed(3),y:(se+i*d).toFixed(3),"text-anchor":"middle","dominant-baseline":"middle",fill:ee,"font-size":10,"font-family":a});e.appendChild(ie("line",{x1:(ae+l*u).toFixed(3),y1:(se+l*d).toFixed(3),x2:(ae+c*u).toFixed(3),y2:(se+c*d).toFixed(3),stroke:ee,"stroke-width":1.5})),f.textContent=t.toLocaleString(),e.appendChild(f)}(s,e,t,n));s.appendChild(c),r&&s.appendChild(function(e){const t=ie("text",{x:ae,y:144,"text-anchor":"middle","dominant-baseline":"middle",fill:Z,"font-size":12,"font-family":o});return t.textContent=e,t}(r));return{svg:s,arcEl:l,valueLabelEl:c}}(r,l,c,i);function h({value:e,status:t}={}){p.setAttribute("d",function(e,t,n){const r=(e-t)/(n-t),o=oe+r*Math.PI,a=(ae+ne*Math.cos(o)).toFixed(3),s=(se+ne*Math.sin(o)).toFixed(3);return r<=0?"":r>=1?ce():`M 40 134 A 90 90 0 0 1 ${a} ${s}`}(e,l,c)),p.setAttribute("stroke",d??function(e,t,n){if(t)return te(t);if(!n?.length)return K;const r=n.reduce((t,n)=>e>=n.value?n:t,null);return r?te(r.status):K}(e,t??n,s)),m.textContent=u?u(e):e}return e.appendChild(f),h({value:t}),{setValue:h,destroy:function(){f.remove()}}}function ce(){return["M 40 134","A 90 90 0 0 1 130 44","A 90 90 0 0 1 220 134"].join(" ")}function ie(e,t){const n=document.createElementNS("http://www.w3.org/2000/svg",e);return Object.entries(t).forEach(([e,t])=>n.setAttribute(e,t)),n}const ue={sm:"1.25rem",md:"2.5rem",lg:"5rem"};function de(e,{value:t=0,data:n,label:r,valueFormat:a,showValue:s=!0,sparkline:c=!0,color:i,size:u="md",align:d="left",verticalAlign:f="top"}={}){const p=i??l[0],m=function(e){const t=document.createElement("div");return Object.assign(t.style,{display:"flex",flexDirection:"column",width:"100%",height:"100%",overflow:"hidden",justifyContent:"center"===e?"center":"flex-start"}),t}(f);e.appendChild(m);const h=s?function(e,t,n,r,a){const s=document.createElement("div"),l=document.createElement("div");if(Object.assign(s.style,{padding:"1rem 1rem 0.5rem",display:"flex",flexDirection:"column",gap:"0.25rem"}),Object.assign(l.style,{fontSize:ue[r],fontWeight:"300",lineHeight:"1",fontFamily:o,color:t,textAlign:a}),s.appendChild(l),n){const e=document.createElement("div");Object.assign(e.style,{fontSize:"0.75rem",fontFamily:o,color:Z,textAlign:a}),e.textContent=n,s.appendChild(e)}return e.appendChild(s),l}(m,p,r,u,d):null;let x=n?[n[0].slice(),n[1].slice()]:null;const b=x&&x[0].length>1?x[0].at(-1)-x[0].at(-2):1;let y=null;if(c&&x){const e=function(e){const t=document.createElement("div");return Object.assign(t.style,{flex:"1",minHeight:"64px"}),e.appendChild(t),t}(m);y=function(e,t,n){const r=[{},{stroke:n,fill:n+"28",width:1.5,points:{show:!1}}];return g(e,{cursor:{show:!1},axes:[{show:!1},{show:!1}],padding:[4,0,4,0],series:r,scales:{x:{time:!0}}},t,null)}(e,x,p)}return h&&(h.textContent=a?a(t):t),{setValue:function({value:e}={}){h&&(h.textContent=a?a(e):e),y&&x&&(x[0].push(x[0].at(-1)+b),x[1].push(e),x[0].shift(),x[1].shift(),y.setData(x))}}}const fe=.08;function pe(e,t){const{data:n,bucketLabels:r,color:o,xTime:a=!0,tooltip:s=!0,valueFormat:i,...u}=t,d=o??l[0],f=n.length-1,p=function(e){let t=0;return e.slice(1).forEach(e=>{e.forEach(e=>{null!=e&&e>t&&(t=e)})}),t||1}(n),m=function(e){if(!e.startsWith("#"))return[69,137,255];const t=e.slice(1),n=3===t.length?t.split("").map(e=>e+e).join(""):t;return[parseInt(n.slice(0,2),16),parseInt(n.slice(2,4),16),parseInt(n.slice(4,6),16)]}(d),x=function(e,t,n){const r=e.slice(1);function o(o){const a=o.ctx,[s,l,c]=t;a.save(),a.beginPath(),a.rect(o.bbox.left,o.bbox.top,o.bbox.width,o.bbox.height),a.clip(),e[0].forEach((t,i)=>{const u=Math.round(o.valToPos(t,"x",!0)),d=e[0][i+1],f=void 0!==d?Math.round(o.valToPos(d,"x",!0)):Math.round(o.bbox.left+o.bbox.width),p=Math.max(1,f-u);r.forEach((e,t)=>{const r=e[i];if(!r)return;const d=fe+.92*(r/n);a.fillStyle=`rgba(${s}, ${l}, ${c}, ${d.toFixed(2)})`;const f=Math.round(o.valToPos(t+1,"y",!0)),m=Math.round(o.valToPos(t,"y",!0)),h=Math.max(1,m-f);a.fillRect(u,f,p,h)})}),a.restore()}return{hooks:{draw:[o]}}}(n,m,p),b=!1!==s?function(e,t,n,r,o,a){let s,l,c,i,u;return{hooks:{init:function(e){S(),s=document.createElement("div"),l=document.createElement("div"),c=document.createElement("div"),i=document.createElement("span"),u=document.createElement("span"),Object.assign(s.style,M),Object.assign(l.style,O),Object.assign(c.style,L),Object.assign(u.style,j),c.className=R,c.appendChild(i),c.appendChild(u),s.appendChild(l),s.appendChild(c),e.over.appendChild(s),e.over.addEventListener("mouseleave",()=>{s.style.display="none"}),e.over.addEventListener("mouseenter",()=>{s.style.display=null})},setCursor:function(d){const{left:f,top:p,idx:m}=d.cursor,h=e.length-1;if(null==m||f<0)return void(s.style.display="none");const g=d.posToVal(p,"y"),x=Math.max(0,Math.min(Math.floor(g),h-1)),b=e[x+1][m],y=fe+.92*(null!=b?b/a:0),[v,w,E]=o;l.textContent=A(e[0][m],n,null),i.textContent=t?t[x]??`Row ${x}`:`Row ${x}`,u.textContent=null==b?"—":z(b,r),c.style.borderLeft=`3px solid rgba(${v}, ${w}, ${E}, ${y.toFixed(2)})`;const C=d.over.getBoundingClientRect(),F=s.offsetWidth,k=C.left+f+16+F>window.innerWidth;s.style.display=null,s.style.left=k?f-16-F+"px":`${f+16}px`,s.style.top=p-20+"px"}}}}(n,r,a,i,m,p):null,y=b?[x,b]:[x],{plugins:v,restOptions:w}=h(y,u);return g(e,{plugins:v,series:me(f),axes:[c(),he(r,f)],scales:{x:{time:a},y:{range:[0,f]}},cursor:{x:!1,y:!1},...w},n,()=>pe(e,t))}function me(e){return[{},...Array.from({length:e},()=>p)]}function he(e,t){const n=Array.from({length:t},(e,t)=>t+.5);return c({splits:()=>n,values:(t,n)=>n.map((t,n)=>e?e[n]??"":String(n)),size:(e,t)=>t?7*Math.max(...t.map(e=>e?e.length:0))+12:40})}function ge(e,{series:t=[],min:n=0,max:r=100,color:s,thresholds:l=[],inverted:c=!1,valueFormat:i}={}){const u=function(){const e=document.createElement("div");return Object.assign(e.style,{display:"flex",flexDirection:"column",gap:"12px",padding:"1rem",width:"100%",boxSizing:"border-box"}),e}(),d=t.map(function(e,t){const s=function(e,t,n,r){const s=document.createElement("div"),l=document.createElement("span"),c=document.createElement("div"),i=document.createElement("div"),u=document.createElement("span");return Object.assign(s.style,{display:"grid",gridTemplateColumns:"minmax(0, max-content) 1fr max-content",alignItems:"center",gap:"12px"}),Object.assign(l.style,{fontSize:"12px",fontFamily:o,color:X,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"140px"}),Object.assign(c.style,{height:"8px",background:U,borderRadius:"2px",overflow:"hidden"}),Object.assign(i.style,{height:"100%",borderRadius:"2px",transition:"width 0.2s ease, background 0.2s ease"}),Object.assign(u.style,{fontSize:"11px",fontFamily:a,color:X,minWidth:"40px",textAlign:"right",whiteSpace:"nowrap"}),l.title=t.label??"",l.textContent=t.label??"",c.setAttribute("role","meter"),c.setAttribute("aria-label",t.label??""),c.setAttribute("aria-valuemin",n),c.setAttribute("aria-valuemax",r),c.appendChild(i),s.appendChild(l),s.appendChild(c),s.appendChild(u),e.appendChild(s),{fillEl:i,valueEl:u,trackEl:c}}(u,e,n,r),l=e.value??0;return f(s,t,l,e.status),s});function f(e,o,a,u){const d=Math.max(0,Math.min((a-n)/(r-n),1)),f=function(e,t,n,r,o,a){const s=o??t?.status;return t?.color?t.color:n||("good"===s?Q:s?te(s):r.length?a?function(e,t){const n=t.find(t=>e<t.value)??null;return n?te(n.status):Q}(e,r):function(e,t){const n=t.reduce((t,n)=>e>=n.value?n:t,null);return n?te(n.status):Q}(e,r):K)}(a,t[o],s,l,u,c);e.fillEl.style.width=100*d+"%",e.fillEl.style.background=f,e.valueEl.textContent=i?i(a):a.toLocaleString(),e.trackEl.setAttribute("aria-valuenow",a)}return e.appendChild(u),{setValue:function(e,{value:t,status:n}={}){const r=d[e];r&&f(r,e,t,n)}}}function xe(t,n,r,o){const a=e.useRef(null);return e.useEffect(()=>{const e=n.current;if(e)return a.current=t(e,r),()=>{a.current?.destroy(),a.current=null}},o),a}function be(t,n){e.useImperativeHandle(t,()=>({get chart(){return n.current}}),[])}const ye=e.forwardRef(function({data:t,yRange:n,series:r,legend:o,tooltip:a,valueFormat:s,xFormat:l,cursor:c,plugins:i,className:u,style:d},f){const p=e.useRef(null);return be(f,xe(N,p,{data:t,yRange:n,series:r,legend:o,tooltip:a,valueFormat:s,xFormat:l,cursor:c,plugins:i},[t,n,r,o,a,s,l,c,i])),e.createElement("div",{ref:p,className:u,style:d})}),ve=e.forwardRef(function({data:t,yRange:n,series:r,legend:o,tooltip:a,valueFormat:s,xFormat:l,cursor:c,className:i,style:u},d){const f=e.useRef(null);return be(d,xe(B,f,{data:t,yRange:n,series:r,legend:o,tooltip:a,valueFormat:s,xFormat:l,cursor:c},[t,n,r,o,a,s,l,c])),e.createElement("div",{ref:f,className:i,style:u})}),we=e.forwardRef(function({data:t,yRange:n,series:r,xFormat:o,legend:a,tooltip:s,valueFormat:l,className:c,style:i},u){const d=e.useRef(null);return be(u,xe(W,d,{data:t,yRange:n,series:r,xFormat:o,legend:a,tooltip:s,valueFormat:l},[t,n,r,o,a,s,l])),e.createElement("div",{ref:d,className:c,style:i})}),Ee=e.forwardRef(function({data:t,xRange:n,yRange:r,series:o,xLabel:a,yLabel:s,legend:l,className:c,style:i},u){const d=e.useRef(null);return be(u,xe(_,d,{data:t,xRange:n,yRange:r,series:o,xLabel:a,yLabel:s,legend:l},[t,n,r,o,a,s,l])),e.createElement("div",{ref:d,className:c,style:i})}),Ce=e.forwardRef(function({data:t,bucketLabels:n,color:r,xTime:o,className:a,style:s},l){const c=e.useRef(null);return be(l,xe(pe,c,{data:t,bucketLabels:n,color:r,xTime:o},[t,n,r,o])),e.createElement("div",{ref:c,className:a,style:s})});exports.AreaChart=ve,exports.BarChart=we,exports.BarGauge=function({series:t,min:n,max:r,color:o,thresholds:a,inverted:s,valueFormat:l,className:c,style:i}){const u=e.useRef(null);return e.useEffect(()=>{const e=u.current;if(e)return ge(e,{series:t,min:n,max:r,color:o,thresholds:a,inverted:s,valueFormat:l}),()=>{for(;e.firstChild;)e.removeChild(e.firstChild)}},[t,n,r,o,a,s,l]),e.createElement("div",{ref:u,className:c,style:i})},exports.Gauge=function({value:t,status:n,ticks:r,thresholds:o,min:a,max:s,label:l,valueFormat:c,color:i,className:u,style:d}){const f=e.useRef(null);return e.useEffect(()=>{const e=f.current;if(e)return le(e,{value:t,status:n,ticks:r,thresholds:o,min:a,max:s,label:l,valueFormat:c,color:i}),()=>{for(;e.firstChild;)e.removeChild(e.firstChild)}},[t,n,r,o,a,s,l,c,i]),e.createElement("div",{ref:f,className:u,style:d})},exports.Heatmap=Ce,exports.LineChart=ye,exports.ScatterChart=Ee,exports.Stat=function({value:t,data:n,label:r,valueFormat:o,showValue:a,sparkline:s,color:l,size:c,align:i,verticalAlign:u,className:d,style:f}){const p=e.useRef(null),m=e.useRef(null),h=e.useRef(!0);return e.useEffect(()=>{const e=p.current;if(e){for(;e.firstChild;)e.removeChild(e.firstChild);return m.current=de(e,{value:t,data:n,label:r,valueFormat:o,showValue:a,sparkline:s,color:l,size:c,align:i,verticalAlign:u}),h.current=!0,()=>{for(;e.firstChild;)e.removeChild(e.firstChild);m.current=null}}},[n,r,o,a,s,l,c,i,u]),e.useEffect(()=>{h.current?h.current=!1:m.current?.setValue({value:t})},[t]),e.createElement("div",{ref:p,className:d,style:f})},exports.bindLegend=function e(t,n){const r=t[f]??[],o=t.root.parentElement;Array.from(n.children).forEach((e,n)=>{const o=n+1,a=r[n],s=e.firstElementChild;let l=F.get(e);a&&s&&(s.style.background=a),l||(l=k(o),F.set(e,l),e.addEventListener("click",l)),l.chart=t}),o.addEventListener(d,t=>{e(t.detail.chart,n)},{once:!0})};

package/dist/react.esm.js

@@ -0,0 +1 @@
+import{forwardRef as e,useRef as t,createElement as n,useEffect as r,useImperativeHandle as o}from"react";import a from"uplot";const s="cu-styles";if(!document.getElementById(s)){const e=document.createElement("style");e.id=s,e.textContent=":root {\n  --cu-background: var(--cds-background, #ffffff);\n  --cu-layer-01: var(--cds-layer-01, #f4f4f4);\n  --cu-layer-02: var(--cds-layer-02, #ffffff);\n  --cu-text-primary: var(--cds-text-primary, #161616);\n  --cu-text-secondary: var(--cds-text-secondary, #525252);\n  --cu-text-helper: var(--cds-text-helper, #6f6f6f);\n  --cu-border-subtle: var(--cds-border-subtle-01, #c6c6c6);\n  --cu-border-subtle-02: var(--cds-border-subtle-02, #e0e0e0);\n  --cu-axis: var(--cds-border-strong-01, #8d8d8d);\n  --cu-interactive: var(--cds-interactive, #0f62fe);\n  --cu-support-error: var(--cds-support-error, #da1e28);\n  --cu-support-warning: var(--cds-support-warning, #f1c21b);\n  --cu-support-success: var(--cds-support-success, #24a148);\n  --cu-support-info: var(--cds-support-info, #0043ce);\n  --cu-layer: var(--cu-layer-01);\n  --cu-grid: rgba(0,0,0,0.07);\n}\n\n.cds--g90 {\n  --cu-grid: rgba(255,255,255,0.09);\n}\n\n.cds--g100 {\n  --cu-grid: rgba(255,255,255,0.07);\n}\n\n.cds--tile {\n  --cu-tooltip-bg: var(--cu-layer-01);\n}\n\n.u-select {\n  background: rgba(15, 98, 254, 0.1);\n  border-left: 1px solid rgba(15, 98, 254, 0.5);\n  border-right: 1px solid rgba(15, 98, 254, 0.5);\n}\n\n.cds--g90 .u-select,\n.cds--g100 .u-select {\n  background: rgba(69, 137, 255, 0.2);\n  border-left: 1px solid rgba(69, 137, 255, 0.65);\n  border-right: 1px solid rgba(69, 137, 255, 0.65);\n}\n",document.head.appendChild(e)}const l={white:{"--cu-background":"#ffffff","--cu-layer-01":"#f4f4f4","--cu-layer-02":"#ffffff","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#c6c6c6","--cu-border-subtle-02":"#e0e0e0","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g10:{"--cu-background":"#f4f4f4","--cu-layer-01":"#ffffff","--cu-layer-02":"#f4f4f4","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#e0e0e0","--cu-border-subtle-02":"#c6c6c6","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g90:{"--cu-background":"#262626","--cu-layer-01":"#393939","--cu-layer-02":"#525252","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#c6c6c6","--cu-border-subtle":"#6f6f6f","--cu-border-subtle-02":"#8d8d8d","--cu-axis":"#8d8d8d","--cu-interactive":"#4589ff","--cu-support-error":"#ff8389","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.09)"},g100:{"--cu-background":"#161616","--cu-layer-01":"#262626","--cu-layer-02":"#393939","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#a8a8a8","--cu-border-subtle":"#525252","--cu-border-subtle-02":"#6f6f6f","--cu-axis":"#6f6f6f","--cu-interactive":"#4589ff","--cu-support-error":"#fa4d56","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.07)"}},i="IBM Plex Sans, sans-serif",c="IBM Plex Mono, monospace",u={"cds--white":"white","cds--g10":"g10","cds--g90":"g90","cds--g100":"g100"},d=["#4589ff","#3ddbd9","#be95ff","#42be65","#ff832b","#f1c21b","#ff8389"];function p(e={}){const t=f("--cu-axis"),n=f("--cu-grid");return{stroke:t,ticks:{stroke:n,width:1},grid:{stroke:n,width:1},font:`11px ${c}`,...e}}function f(e){const t=getComputedStyle(document.documentElement),n=l[function(){const e=Object.keys(u).find(e=>document.documentElement.classList.contains(e));return u[e]??"white"}()];return t.getPropertyValue(e).trim()||n[e]||""}const m="cu-theme-change",h="cu-chart-recreated";const g=Symbol("carbonSeriesColors"),x={stroke:"transparent",fill:"transparent",paths:()=>null};function b(e,t){return Array.from({length:e},(e,n)=>(t[n]??{}).color??d[n%d.length])}function y(e,t){const{plugins:n=[],...r}=t;return{plugins:[...e,...n],restOptions:r}}function v(e,t,n,r){const o=e.getBoundingClientRect().width||e.clientWidth||300,s=e.clientHeight||170,l=new a({width:o,height:s,background:"transparent",padding:[8,8,0,0],legend:{show:!1},cursor:{show:!0,drag:{x:!0,y:!1,uni:10}},...t},n,e),i=new ResizeObserver(t=>{const n=t[0]?.contentRect.width;n>0&&l.setSize({width:n,height:e.clientHeight})});i.observe(e);const c=l.destroy.bind(l);let u=null;var d;return r&&(d=()=>{i.disconnect(),u(),c();const t=r(e);t&&e.dispatchEvent(new CustomEvent(h,{detail:{chart:t}}))},document.addEventListener(m,d),u=()=>document.removeEventListener(m,d)),l.destroy=()=>{i.disconnect(),u&&u(),c()},l}const w={display:"flex",flexWrap:"wrap",gap:"12px"},C={marginTop:"8px",paddingTop:"8px",borderTop:"0.5px solid var(--cu-border-subtle)"},E={marginBottom:"8px",paddingBottom:"8px",borderBottom:"0.5px solid var(--cu-border-subtle)"},F={display:"flex",alignItems:"center",gap:"5px",fontSize:"11px",fontFamily:"inherit",color:"var(--cu-text-secondary)",background:"none",border:"none",padding:"0",cursor:"pointer"},k={width:"16px",height:"2px",flexShrink:"0"};function S(e,t){Object.assign(e.style,t)}function M(e,t,n,r){if(!1===r)return;const o=t.map(e=>e?.label);o.some(Boolean)&&function(e,t,n,r="bottom"){const o=e[g]??[],a=document.createElement("div"),s=[];S(a,w),S(a,"top"===r?E:C),t.forEach((t,n)=>{if(!t)return;const{item:r,handler:l}=function(e,t,n,r){const o=document.createElement("button"),a=document.createElement("span"),s=L(n);s.chart=e,r&&(a.style.background=r);return S(o,F),S(a,k),o.appendChild(a),o.appendChild(document.createTextNode(t)),o.addEventListener("click",s),{item:o,handler:s}}(e,t,n+1,o[n]);a.appendChild(r),s.push([r,l])}),n.insertAdjacentElement("top"===r?"beforebegin":"afterend",a),e.hooks.destroy=e.hooks.destroy??[],e.hooks.destroy.push(()=>{s.forEach(([e,t])=>e.removeEventListener("click",t)),a.remove()})}(e,o,n,"top"===r?"top":"bottom")}const O=new WeakMap;function j(e,t){const n=e[g]??[],r=e.root.parentElement;Array.from(t.children).forEach((t,r)=>{const o=r+1,a=n[r],s=t.firstElementChild;let l=O.get(t);a&&s&&(s.style.background=a),l||(l=L(o),O.set(t,l),t.addEventListener("click",l)),l.chart=e}),r.addEventListener(h,e=>{j(e.detail.chart,t)},{once:!0})}function L(e){return{chart:null,handleEvent(t){const n=!1!==this.chart.series[e].show;this.chart.setSeries(e,{show:!n}),t.currentTarget.style.opacity=n?"0.3":""}}}const $="cu-tooltip__row";function R(){if(document.getElementById("cu-tooltip-styles"))return;const e=document.createElement("style");e.id="cu-tooltip-styles",e.textContent=`.${$}:not(:last-child) { border-bottom: 1px solid var(--cu-grid); }`,document.head.appendChild(e)}const A={position:"absolute",pointerEvents:"none",background:"var(--cu-tooltip-bg, var(--cu-background))",boxShadow:"0 2px 6px rgba(0, 0, 0, 0.3)",fontSize:"12px",fontFamily:i,color:"var(--cu-text-primary)",minWidth:"160px",zIndex:"100",display:"none"},z={padding:"8px 12px 6px",borderBottom:"1px solid var(--cu-grid)",fontFamily:c,fontSize:"11px",color:"var(--cu-text-primary)"},N={display:"flex",alignItems:"center",justifyContent:"space-between",gap:"24px",padding:"5px 12px 5px 9px"},T={fontFamily:c,fontSize:"11px",color:"var(--cu-text-primary)"};function I({colors:e,isTimeScale:t=!1,xFormat:n,valueFormat:r}={}){let o,a,s;return{hooks:{init:function(t){R(),o=document.createElement("div"),a=document.createElement("div"),Object.assign(o.style,A),Object.assign(a.style,z),o.appendChild(a),s=t.series.slice(1).map((t,n)=>{const r=e[n],a=document.createElement("div"),s=document.createElement("span"),l=document.createElement("span");return a.className=$,Object.assign(a.style,N),a.style.borderLeft=`3px solid ${r}`,s.textContent=null!=t.label?`${t.label} `:`Series ${n+1} `,Object.assign(l.style,T),a.appendChild(s),a.appendChild(l),o.appendChild(a),{row:a,valueEl:l,seriesIndex:n+1}}),o.style.bottom="8px",t.over.appendChild(o),t.over.addEventListener("mouseleave",()=>{o.style.display="none"}),t.over.addEventListener("mouseenter",()=>{o.style.display=null})},setCursor:function(e){const{left:l,idx:i}=e.cursor,c=e.over.getBoundingClientRect(),u=o.offsetWidth,d=c.left+l+16+u>window.innerWidth;null==i||l<0?o.style.display="none":(o.style.display=null,a.textContent=P(e.data[0][i],t,n),s.forEach(({row:t,valueEl:n,seriesIndex:o})=>{const a=e.series[o],s=e.data[o][i];a?.show?(t.style.display=null,n.textContent=null==s?"—":B(s,r)):t.style.display="none"}),o.style.left=d?l-16-u+"px":`${l+16}px`)}}}}function P(e,t,n){if(n)return n(e);if(t){const t=new Date(1e3*e),n=e=>String(e).padStart(2,"0");return`${t.getFullYear()}-${n(t.getMonth()+1)}-${n(t.getDate())} ${n(t.getHours())}:${n(t.getMinutes())}`}return String(e)}function B(e,t){return t?t(e):e.toLocaleString()}function W(e,t){const{series:n=[],data:r,yRange:o,legend:a=!0,tooltip:s=!0,valueFormat:l,xFormat:i,...c}=t,u=b(r.length-1,n),{plugins:d,restOptions:f}=y(function(e,t,n,r){return!1!==t?[I({colors:e,isTimeScale:!0,valueFormat:n,xFormat:r})]:[]}(u,s,l,i),c),m=v(e,{axes:[p(),V(l)],plugins:d,series:D(u,n),scales:{x:{time:!0},y:{range:o}},...f},r,()=>W(e,t));return m[g]=u,M(m,n,e,a),m}function V(e){return e?p({values:(t,n)=>n.map(t=>null==t?"":e(t)),size:(e,t)=>t?7*Math.max(...t.map(e=>e.length))+12:40}):p()}function D(e,t){return[{},...e.map((e,n)=>{const{label:r,width:o,color:a,...s}=t[n]??{};return{label:r,stroke:e,width:o??2,...s}})]}function H(e,t){const{series:n=[],data:r,yRange:o,legend:a=!0,tooltip:s=!0,valueFormat:l,xFormat:i,...c}=t,u=b(r.length-1,n),{plugins:d,restOptions:f}=y(function(e,t,n,r){return!1!==t?[I({colors:e,isTimeScale:!0,valueFormat:n,xFormat:r})]:[]}(u,s,l,i),c),m=v(e,{axes:[p(),p()],plugins:d,series:_(u,n),scales:{x:{time:!0},y:{range:o}},...f},r,()=>H(e,t));return m[g]=u,M(m,n,e,a),m}function _(e,t){return[{},...e.map((e,n)=>{const{label:r,width:o,color:a,...s}=t[n]??{};return{label:r,stroke:e,fill:e+"28",width:o??2,...s}})]}function Y(e,t){const{series:n=[],data:r,yRange:o,xFormat:a,legend:s=!0,tooltip:l=!0,valueFormat:i,...c}=t,u=b(r.length-1,n),{plugins:d,restOptions:p}=y(function(e,t,n,r){return!1!==t?[I({colors:e,isTimeScale:!0,xFormat:n,valueFormat:r})]:[]}(u,l,a,i),c),f=v(e,{axes:[q(a),G(i)],plugins:d,series:K(u,n),scales:{x:{time:!0,range:J(r)},y:{range:o}},...p},r,()=>Y(e,t));return f[g]=u,M(f,n,e,s),f}function q(e){return p({values:e?(t,n)=>n.map(e):void 0})}function G(e){return e?p({values:(t,n)=>n.map(t=>null==t?"":e(t)),size:(e,t)=>t?7*Math.max(...t.map(e=>e.length))+12:40}):p()}function J(e){return(t,n,r)=>{const o=e[0].length,a=(r-n)/(o-1)/2;return o<=1?[n,r]:[n-a,r+a]}}function K(e,t){return[{},...e.map((e,n)=>({label:t[n]?.label,fill:e,width:0,paths:a.paths.bars({size:[.6,18,1]}),points:(t[n]??{}).points??{show:!1}}))]}const Q=`11px ${i}`;function U(e,t){const{series:n=[],data:r,xRange:o,yRange:a,xLabel:s,yLabel:l,legend:i=!0,...c}=t,u=r.length-1,d=b(u,n),{plugins:f,restOptions:m}=y([(h=d,{hooks:{drawSeries:[Z.bind(null,h)]}})],c);var h;const x=v(e,{axes:[p({label:s,labelFont:Q}),p({label:l,labelFont:Q})],plugins:f,series:X(u),scales:{x:{time:!1,range:o},y:{range:a}},...m},r,()=>U(e,t));return x[g]=d,M(x,n,e,i),x}function X(e){return[{},...Array.from({length:e},()=>x)]}function Z(e,t,n){const r=t.ctx,o=e[n-1]+"cc";r.save(),r.fillStyle=o,t.data[n].forEach((e,n)=>{r.beginPath(),r.arc(t.valToPos(t.data[0][n],"x",!0),t.valToPos(e,"y",!0),3.5,0,2*Math.PI),r.fill()}),r.restore()}const ee="var(--cu-interactive)",te="var(--cu-support-success)",ne="var(--cu-border-subtle)",re="var(--cu-text-primary)",oe="var(--cu-text-secondary)",ae="var(--cu-text-helper)";function se(e){return`var(--cu-support-${e})`}const le=90,ie=14;const ce=Math.PI,ue=130,de=134;function pe(e,{value:t=0,status:n,ticks:r=!0,thresholds:o=[],min:a=0,max:s=100,label:l,valueFormat:u,color:d}={}){const{svg:p,arcEl:f,valueLabelEl:m}=function(e,t,n,r){const o=me("svg",{viewBox:"0 0 260 148",width:"100%"}),a=me("path",{"stroke-width":ie,fill:"none"}),s=me("text",{x:ue,y:114,"text-anchor":"middle","dominant-baseline":"middle",fill:re,"font-size":36,"font-weight":300,"font-family":i});o.appendChild(function(){return me("path",{d:fe(),stroke:ne,"stroke-width":ie,fill:"none"})}()),o.appendChild(a),e&&function(e,t){const n=t-e;return[0,.25,.5,.75,1].map(t=>e+t*n)}(t,n).forEach(e=>function(e,t,n,r){const o=(t-n)/(r-n),a=ce+o*Math.PI,s=79,l=101,i=113,u=Math.cos(a),d=Math.sin(a),p=me("text",{x:(ue+i*u).toFixed(3),y:(de+i*d).toFixed(3),"text-anchor":"middle","dominant-baseline":"middle",fill:ae,"font-size":10,"font-family":c});e.appendChild(me("line",{x1:(ue+s*u).toFixed(3),y1:(de+s*d).toFixed(3),x2:(ue+l*u).toFixed(3),y2:(de+l*d).toFixed(3),stroke:ae,"stroke-width":1.5})),p.textContent=t.toLocaleString(),e.appendChild(p)}(o,e,t,n));o.appendChild(s),r&&o.appendChild(function(e){const t=me("text",{x:ue,y:144,"text-anchor":"middle","dominant-baseline":"middle",fill:oe,"font-size":12,"font-family":i});return t.textContent=e,t}(r));return{svg:o,arcEl:a,valueLabelEl:s}}(r,a,s,l);function h({value:e,status:t}={}){f.setAttribute("d",function(e,t,n){const r=(e-t)/(n-t),o=ce+r*Math.PI,a=(ue+le*Math.cos(o)).toFixed(3),s=(de+le*Math.sin(o)).toFixed(3);return r<=0?"":r>=1?fe():`M 40 134 A 90 90 0 0 1 ${a} ${s}`}(e,a,s)),f.setAttribute("stroke",d??function(e,t,n){if(t)return se(t);if(!n?.length)return ee;const r=n.reduce((t,n)=>e>=n.value?n:t,null);return r?se(r.status):ee}(e,t??n,o)),m.textContent=u?u(e):e}return e.appendChild(p),h({value:t}),{setValue:h,destroy:function(){p.remove()}}}function fe(){return["M 40 134","A 90 90 0 0 1 130 44","A 90 90 0 0 1 220 134"].join(" ")}function me(e,t){const n=document.createElementNS("http://www.w3.org/2000/svg",e);return Object.entries(t).forEach(([e,t])=>n.setAttribute(e,t)),n}const he={sm:"1.25rem",md:"2.5rem",lg:"5rem"};function ge(e,{value:t=0,data:n,label:r,valueFormat:o,showValue:a=!0,sparkline:s=!0,color:l,size:c="md",align:u="left",verticalAlign:p="top"}={}){const f=l??d[0],m=function(e){const t=document.createElement("div");return Object.assign(t.style,{display:"flex",flexDirection:"column",width:"100%",height:"100%",overflow:"hidden",justifyContent:"center"===e?"center":"flex-start"}),t}(p);e.appendChild(m);const h=a?function(e,t,n,r,o){const a=document.createElement("div"),s=document.createElement("div");if(Object.assign(a.style,{padding:"1rem 1rem 0.5rem",display:"flex",flexDirection:"column",gap:"0.25rem"}),Object.assign(s.style,{fontSize:he[r],fontWeight:"300",lineHeight:"1",fontFamily:i,color:t,textAlign:o}),a.appendChild(s),n){const e=document.createElement("div");Object.assign(e.style,{fontSize:"0.75rem",fontFamily:i,color:oe,textAlign:o}),e.textContent=n,a.appendChild(e)}return e.appendChild(a),s}(m,f,r,c,u):null;let g=n?[n[0].slice(),n[1].slice()]:null;const x=g&&g[0].length>1?g[0].at(-1)-g[0].at(-2):1;let b=null;if(s&&g){const e=function(e){const t=document.createElement("div");return Object.assign(t.style,{flex:"1",minHeight:"64px"}),e.appendChild(t),t}(m);b=function(e,t,n){const r=[{},{stroke:n,fill:n+"28",width:1.5,points:{show:!1}}];return v(e,{cursor:{show:!1},axes:[{show:!1},{show:!1}],padding:[4,0,4,0],series:r,scales:{x:{time:!0}}},t,null)}(e,g,f)}return h&&(h.textContent=o?o(t):t),{setValue:function({value:e}={}){h&&(h.textContent=o?o(e):e),b&&g&&(g[0].push(g[0].at(-1)+x),g[1].push(e),g[0].shift(),g[1].shift(),b.setData(g))}}}const xe=.08;function be(e,t){const{data:n,bucketLabels:r,color:o,xTime:a=!0,tooltip:s=!0,valueFormat:l,...i}=t,c=o??d[0],u=n.length-1,f=function(e){let t=0;return e.slice(1).forEach(e=>{e.forEach(e=>{null!=e&&e>t&&(t=e)})}),t||1}(n),m=function(e){if(!e.startsWith("#"))return[69,137,255];const t=e.slice(1),n=3===t.length?t.split("").map(e=>e+e).join(""):t;return[parseInt(n.slice(0,2),16),parseInt(n.slice(2,4),16),parseInt(n.slice(4,6),16)]}(c),h=function(e,t,n){const r=e.slice(1);function o(o){const a=o.ctx,[s,l,i]=t;a.save(),a.beginPath(),a.rect(o.bbox.left,o.bbox.top,o.bbox.width,o.bbox.height),a.clip(),e[0].forEach((t,c)=>{const u=Math.round(o.valToPos(t,"x",!0)),d=e[0][c+1],p=void 0!==d?Math.round(o.valToPos(d,"x",!0)):Math.round(o.bbox.left+o.bbox.width),f=Math.max(1,p-u);r.forEach((e,t)=>{const r=e[c];if(!r)return;const d=xe+.92*(r/n);a.fillStyle=`rgba(${s}, ${l}, ${i}, ${d.toFixed(2)})`;const p=Math.round(o.valToPos(t+1,"y",!0)),m=Math.round(o.valToPos(t,"y",!0)),h=Math.max(1,m-p);a.fillRect(u,p,f,h)})}),a.restore()}return{hooks:{draw:[o]}}}(n,m,f),g=!1!==s?function(e,t,n,r,o,a){let s,l,i,c,u;return{hooks:{init:function(e){R(),s=document.createElement("div"),l=document.createElement("div"),i=document.createElement("div"),c=document.createElement("span"),u=document.createElement("span"),Object.assign(s.style,A),Object.assign(l.style,z),Object.assign(i.style,N),Object.assign(u.style,T),i.className=$,i.appendChild(c),i.appendChild(u),s.appendChild(l),s.appendChild(i),e.over.appendChild(s),e.over.addEventListener("mouseleave",()=>{s.style.display="none"}),e.over.addEventListener("mouseenter",()=>{s.style.display=null})},setCursor:function(d){const{left:p,top:f,idx:m}=d.cursor,h=e.length-1;if(null==m||p<0)return void(s.style.display="none");const g=d.posToVal(f,"y"),x=Math.max(0,Math.min(Math.floor(g),h-1)),b=e[x+1][m],y=xe+.92*(null!=b?b/a:0),[v,w,C]=o;l.textContent=P(e[0][m],n,null),c.textContent=t?t[x]??`Row ${x}`:`Row ${x}`,u.textContent=null==b?"—":B(b,r),i.style.borderLeft=`3px solid rgba(${v}, ${w}, ${C}, ${y.toFixed(2)})`;const E=d.over.getBoundingClientRect(),F=s.offsetWidth,k=E.left+p+16+F>window.innerWidth;s.style.display=null,s.style.left=k?p-16-F+"px":`${p+16}px`,s.style.top=f-20+"px"}}}}(n,r,a,l,m,f):null,x=g?[h,g]:[h],{plugins:b,restOptions:w}=y(x,i);return v(e,{plugins:b,series:ye(u),axes:[p(),ve(r,u)],scales:{x:{time:a},y:{range:[0,u]}},cursor:{x:!1,y:!1},...w},n,()=>be(e,t))}function ye(e){return[{},...Array.from({length:e},()=>x)]}function ve(e,t){const n=Array.from({length:t},(e,t)=>t+.5);return p({splits:()=>n,values:(t,n)=>n.map((t,n)=>e?e[n]??"":String(n)),size:(e,t)=>t?7*Math.max(...t.map(e=>e?e.length:0))+12:40})}function we(e,{series:t=[],min:n=0,max:r=100,color:o,thresholds:a=[],inverted:s=!1,valueFormat:l}={}){const u=function(){const e=document.createElement("div");return Object.assign(e.style,{display:"flex",flexDirection:"column",gap:"12px",padding:"1rem",width:"100%",boxSizing:"border-box"}),e}(),d=t.map(function(e,t){const o=function(e,t,n,r){const o=document.createElement("div"),a=document.createElement("span"),s=document.createElement("div"),l=document.createElement("div"),u=document.createElement("span");return Object.assign(o.style,{display:"grid",gridTemplateColumns:"minmax(0, max-content) 1fr max-content",alignItems:"center",gap:"12px"}),Object.assign(a.style,{fontSize:"12px",fontFamily:i,color:re,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"140px"}),Object.assign(s.style,{height:"8px",background:ne,borderRadius:"2px",overflow:"hidden"}),Object.assign(l.style,{height:"100%",borderRadius:"2px",transition:"width 0.2s ease, background 0.2s ease"}),Object.assign(u.style,{fontSize:"11px",fontFamily:c,color:re,minWidth:"40px",textAlign:"right",whiteSpace:"nowrap"}),a.title=t.label??"",a.textContent=t.label??"",s.setAttribute("role","meter"),s.setAttribute("aria-label",t.label??""),s.setAttribute("aria-valuemin",n),s.setAttribute("aria-valuemax",r),s.appendChild(l),o.appendChild(a),o.appendChild(s),o.appendChild(u),e.appendChild(o),{fillEl:l,valueEl:u,trackEl:s}}(u,e,n,r),a=e.value??0;return p(o,t,a,e.status),o});function p(e,i,c,u){const d=Math.max(0,Math.min((c-n)/(r-n),1)),p=function(e,t,n,r,o,a){const s=o??t?.status;return t?.color?t.color:n||("good"===s?te:s?se(s):r.length?a?function(e,t){const n=t.find(t=>e<t.value)??null;return n?se(n.status):te}(e,r):function(e,t){const n=t.reduce((t,n)=>e>=n.value?n:t,null);return n?se(n.status):te}(e,r):ee)}(c,t[i],o,a,u,s);e.fillEl.style.width=100*d+"%",e.fillEl.style.background=p,e.valueEl.textContent=l?l(c):c.toLocaleString(),e.trackEl.setAttribute("aria-valuenow",c)}return e.appendChild(u),{setValue:function(e,{value:t,status:n}={}){const r=d[e];r&&p(r,e,t,n)}}}function Ce(e,n,o,a){const s=t(null);return r(()=>{const t=n.current;if(t)return s.current=e(t,o),()=>{s.current?.destroy(),s.current=null}},a),s}function Ee(e,t){o(e,()=>({get chart(){return t.current}}),[])}const Fe=e(function({data:e,yRange:r,series:o,legend:a,tooltip:s,valueFormat:l,xFormat:i,cursor:c,plugins:u,className:d,style:p},f){const m=t(null);return Ee(f,Ce(W,m,{data:e,yRange:r,series:o,legend:a,tooltip:s,valueFormat:l,xFormat:i,cursor:c,plugins:u},[e,r,o,a,s,l,i,c,u])),n("div",{ref:m,className:d,style:p})}),ke=e(function({data:e,yRange:r,series:o,legend:a,tooltip:s,valueFormat:l,xFormat:i,cursor:c,className:u,style:d},p){const f=t(null);return Ee(p,Ce(H,f,{data:e,yRange:r,series:o,legend:a,tooltip:s,valueFormat:l,xFormat:i,cursor:c},[e,r,o,a,s,l,i,c])),n("div",{ref:f,className:u,style:d})}),Se=e(function({data:e,yRange:r,series:o,xFormat:a,legend:s,tooltip:l,valueFormat:i,className:c,style:u},d){const p=t(null);return Ee(d,Ce(Y,p,{data:e,yRange:r,series:o,xFormat:a,legend:s,tooltip:l,valueFormat:i},[e,r,o,a,s,l,i])),n("div",{ref:p,className:c,style:u})}),Me=e(function({data:e,xRange:r,yRange:o,series:a,xLabel:s,yLabel:l,legend:i,className:c,style:u},d){const p=t(null);return Ee(d,Ce(U,p,{data:e,xRange:r,yRange:o,series:a,xLabel:s,yLabel:l,legend:i},[e,r,o,a,s,l,i])),n("div",{ref:p,className:c,style:u})}),Oe=e(function({data:e,bucketLabels:r,color:o,xTime:a,className:s,style:l},i){const c=t(null);return Ee(i,Ce(be,c,{data:e,bucketLabels:r,color:o,xTime:a},[e,r,o,a])),n("div",{ref:c,className:s,style:l})});function je({value:e,data:o,label:a,valueFormat:s,showValue:l,sparkline:i,color:c,size:u,align:d,verticalAlign:p,className:f,style:m}){const h=t(null),g=t(null),x=t(!0);return r(()=>{const t=h.current;if(t){for(;t.firstChild;)t.removeChild(t.firstChild);return g.current=ge(t,{value:e,data:o,label:a,valueFormat:s,showValue:l,sparkline:i,color:c,size:u,align:d,verticalAlign:p}),x.current=!0,()=>{for(;t.firstChild;)t.removeChild(t.firstChild);g.current=null}}},[o,a,s,l,i,c,u,d,p]),r(()=>{x.current?x.current=!1:g.current?.setValue({value:e})},[e]),n("div",{ref:h,className:f,style:m})}function Le({value:e,status:o,ticks:a,thresholds:s,min:l,max:i,label:c,valueFormat:u,color:d,className:p,style:f}){const m=t(null);return r(()=>{const t=m.current;if(t)return pe(t,{value:e,status:o,ticks:a,thresholds:s,min:l,max:i,label:c,valueFormat:u,color:d}),()=>{for(;t.firstChild;)t.removeChild(t.firstChild)}},[e,o,a,s,l,i,c,u,d]),n("div",{ref:m,className:p,style:f})}function $e({series:e,min:o,max:a,color:s,thresholds:l,inverted:i,valueFormat:c,className:u,style:d}){const p=t(null);return r(()=>{const t=p.current;if(t)return we(t,{series:e,min:o,max:a,color:s,thresholds:l,inverted:i,valueFormat:c}),()=>{for(;t.firstChild;)t.removeChild(t.firstChild)}},[e,o,a,s,l,i,c]),n("div",{ref:p,className:u,style:d})}export{ke as AreaChart,Se as BarChart,$e as BarGauge,Le as Gauge,Oe as Heatmap,Fe as LineChart,Me as ScatterChart,je as Stat,j as bindLegend};

package/dist/web-components.cjs.js

@@ -0,0 +1 @@
+"use strict";var t=require("uplot");const e="cu-styles";if(!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.textContent=":root {\n  --cu-background: var(--cds-background, #ffffff);\n  --cu-layer-01: var(--cds-layer-01, #f4f4f4);\n  --cu-layer-02: var(--cds-layer-02, #ffffff);\n  --cu-text-primary: var(--cds-text-primary, #161616);\n  --cu-text-secondary: var(--cds-text-secondary, #525252);\n  --cu-text-helper: var(--cds-text-helper, #6f6f6f);\n  --cu-border-subtle: var(--cds-border-subtle-01, #c6c6c6);\n  --cu-border-subtle-02: var(--cds-border-subtle-02, #e0e0e0);\n  --cu-axis: var(--cds-border-strong-01, #8d8d8d);\n  --cu-interactive: var(--cds-interactive, #0f62fe);\n  --cu-support-error: var(--cds-support-error, #da1e28);\n  --cu-support-warning: var(--cds-support-warning, #f1c21b);\n  --cu-support-success: var(--cds-support-success, #24a148);\n  --cu-support-info: var(--cds-support-info, #0043ce);\n  --cu-layer: var(--cu-layer-01);\n  --cu-grid: rgba(0,0,0,0.07);\n}\n\n.cds--g90 {\n  --cu-grid: rgba(255,255,255,0.09);\n}\n\n.cds--g100 {\n  --cu-grid: rgba(255,255,255,0.07);\n}\n\n.cds--tile {\n  --cu-tooltip-bg: var(--cu-layer-01);\n}\n\n.u-select {\n  background: rgba(15, 98, 254, 0.1);\n  border-left: 1px solid rgba(15, 98, 254, 0.5);\n  border-right: 1px solid rgba(15, 98, 254, 0.5);\n}\n\n.cds--g90 .u-select,\n.cds--g100 .u-select {\n  background: rgba(69, 137, 255, 0.2);\n  border-left: 1px solid rgba(69, 137, 255, 0.65);\n  border-right: 1px solid rgba(69, 137, 255, 0.65);\n}\n",document.head.appendChild(t)}const n={white:{"--cu-background":"#ffffff","--cu-layer-01":"#f4f4f4","--cu-layer-02":"#ffffff","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#c6c6c6","--cu-border-subtle-02":"#e0e0e0","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g10:{"--cu-background":"#f4f4f4","--cu-layer-01":"#ffffff","--cu-layer-02":"#f4f4f4","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#e0e0e0","--cu-border-subtle-02":"#c6c6c6","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g90:{"--cu-background":"#262626","--cu-layer-01":"#393939","--cu-layer-02":"#525252","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#c6c6c6","--cu-border-subtle":"#6f6f6f","--cu-border-subtle-02":"#8d8d8d","--cu-axis":"#8d8d8d","--cu-interactive":"#4589ff","--cu-support-error":"#ff8389","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.09)"},g100:{"--cu-background":"#161616","--cu-layer-01":"#262626","--cu-layer-02":"#393939","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#a8a8a8","--cu-border-subtle":"#525252","--cu-border-subtle-02":"#6f6f6f","--cu-axis":"#6f6f6f","--cu-interactive":"#4589ff","--cu-support-error":"#fa4d56","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.07)"}},s="IBM Plex Sans, sans-serif",r="IBM Plex Mono, monospace",o={"cds--white":"white","cds--g10":"g10","cds--g90":"g90","cds--g100":"g100"},i=["#4589ff","#3ddbd9","#be95ff","#42be65","#ff832b","#f1c21b","#ff8389"];function a(t={}){const e=l("--cu-axis"),n=l("--cu-grid");return{stroke:e,ticks:{stroke:n,width:1},grid:{stroke:n,width:1},font:`11px ${r}`,...t}}function l(t){const e=getComputedStyle(document.documentElement),s=n[function(){const t=Object.keys(o).find(t=>document.documentElement.classList.contains(t));return o[t]??"white"}()];return e.getPropertyValue(t).trim()||s[t]||""}const c="cu-theme-change";const u=Symbol("carbonSeriesColors"),d={stroke:"transparent",fill:"transparent",paths:()=>null};function h(t,e){return Array.from({length:t},(t,n)=>(e[n]??{}).color??i[n%i.length])}function p(t,e){const{plugins:n=[],...s}=e;return{plugins:[...t,...n],restOptions:s}}function f(e,n,s,r){const o=e.getBoundingClientRect().width||e.clientWidth||300,i=e.clientHeight||170,a=new t({width:o,height:i,background:"transparent",padding:[8,8,0,0],legend:{show:!1},cursor:{show:!0,drag:{x:!0,y:!1,uni:10}},...n},s,e),l=new ResizeObserver(t=>{const n=t[0]?.contentRect.width;n>0&&a.setSize({width:n,height:e.clientHeight})});l.observe(e);const u=a.destroy.bind(a);let d=null;var h;return r&&(h=()=>{l.disconnect(),d(),u();const t=r(e);t&&e.dispatchEvent(new CustomEvent("cu-chart-recreated",{detail:{chart:t}}))},document.addEventListener(c,h),d=()=>document.removeEventListener(c,h)),a.destroy=()=>{l.disconnect(),d&&d(),u()},a}const g={display:"flex",flexWrap:"wrap",gap:"12px"},m={marginTop:"8px",paddingTop:"8px",borderTop:"0.5px solid var(--cu-border-subtle)"},b={marginBottom:"8px",paddingBottom:"8px",borderBottom:"0.5px solid var(--cu-border-subtle)"},x={display:"flex",alignItems:"center",gap:"5px",fontSize:"11px",fontFamily:"inherit",color:"var(--cu-text-secondary)",background:"none",border:"none",padding:"0",cursor:"pointer"},v={width:"16px",height:"2px",flexShrink:"0"};function y(t,e){Object.assign(t.style,e)}function C(t,e,n,s){if(!1===s)return;const r=e.map(t=>t?.label);r.some(Boolean)&&function(t,e,n,s="bottom"){const r=t[u]??[],o=document.createElement("div"),i=[];y(o,g),y(o,"top"===s?b:m),e.forEach((e,n)=>{if(!e)return;const{item:s,handler:a}=function(t,e,n,s){const r=document.createElement("button"),o=document.createElement("span"),i=function(t){return{chart:null,handleEvent(e){const n=!1!==this.chart.series[t].show;this.chart.setSeries(t,{show:!n}),e.currentTarget.style.opacity=n?"0.3":""}}}(n);i.chart=t,s&&(o.style.background=s);return y(r,x),y(o,v),r.appendChild(o),r.appendChild(document.createTextNode(e)),r.addEventListener("click",i),{item:r,handler:i}}(t,e,n+1,r[n]);o.appendChild(s),i.push([s,a])}),n.insertAdjacentElement("top"===s?"beforebegin":"afterend",o),t.hooks.destroy=t.hooks.destroy??[],t.hooks.destroy.push(()=>{i.forEach(([t,e])=>t.removeEventListener("click",e)),o.remove()})}(t,r,n,"top"===s?"top":"bottom")}const _="cu-tooltip__row";function w(){if(document.getElementById("cu-tooltip-styles"))return;const t=document.createElement("style");t.id="cu-tooltip-styles",t.textContent=`.${_}:not(:last-child) { border-bottom: 1px solid var(--cu-grid); }`,document.head.appendChild(t)}const E={position:"absolute",pointerEvents:"none",background:"var(--cu-tooltip-bg, var(--cu-background))",boxShadow:"0 2px 6px rgba(0, 0, 0, 0.3)",fontSize:"12px",fontFamily:s,color:"var(--cu-text-primary)",minWidth:"160px",zIndex:"100",display:"none"},k={padding:"8px 12px 6px",borderBottom:"1px solid var(--cu-grid)",fontFamily:r,fontSize:"11px",color:"var(--cu-text-primary)"},F={display:"flex",alignItems:"center",justifyContent:"space-between",gap:"24px",padding:"5px 12px 5px 9px"},S={fontFamily:r,fontSize:"11px",color:"var(--cu-text-primary)"};function M({colors:t,isTimeScale:e=!1,xFormat:n,valueFormat:s}={}){let r,o,i;return{hooks:{init:function(e){w(),r=document.createElement("div"),o=document.createElement("div"),Object.assign(r.style,E),Object.assign(o.style,k),r.appendChild(o),i=e.series.slice(1).map((e,n)=>{const s=t[n],o=document.createElement("div"),i=document.createElement("span"),a=document.createElement("span");return o.className=_,Object.assign(o.style,F),o.style.borderLeft=`3px solid ${s}`,i.textContent=null!=e.label?`${e.label} `:`Series ${n+1} `,Object.assign(a.style,S),o.appendChild(i),o.appendChild(a),r.appendChild(o),{row:o,valueEl:a,seriesIndex:n+1}}),r.style.bottom="8px",e.over.appendChild(r),e.over.addEventListener("mouseleave",()=>{r.style.display="none"}),e.over.addEventListener("mouseenter",()=>{r.style.display=null})},setCursor:function(t){const{left:a,idx:l}=t.cursor,c=t.over.getBoundingClientRect(),u=r.offsetWidth,d=c.left+a+16+u>window.innerWidth;null==l||a<0?r.style.display="none":(r.style.display=null,o.textContent=O(t.data[0][l],e,n),i.forEach(({row:e,valueEl:n,seriesIndex:r})=>{const o=t.series[r],i=t.data[r][l];o?.show?(e.style.display=null,n.textContent=null==i?"—":A(i,s)):e.style.display="none"}),r.style.left=d?a-16-u+"px":`${a+16}px`)}}}}function O(t,e,n){if(n)return n(t);if(e){const e=new Date(1e3*t),n=t=>String(t).padStart(2,"0");return`${e.getFullYear()}-${n(e.getMonth()+1)}-${n(e.getDate())} ${n(e.getHours())}:${n(e.getMinutes())}`}return String(t)}function A(t,e){return e?e(t):t.toLocaleString()}function j(t,e){const{series:n=[],data:s,yRange:r,legend:o=!0,tooltip:i=!0,valueFormat:l,xFormat:c,...d}=e,g=h(s.length-1,n),{plugins:m,restOptions:b}=p(function(t,e,n,s){return!1!==e?[M({colors:t,isTimeScale:!0,valueFormat:n,xFormat:s})]:[]}(g,i,l,c),d),x=f(t,{axes:[a(),L(l)],plugins:m,series:$(g,n),scales:{x:{time:!0},y:{range:r}},...b},s,()=>j(t,e));return x[u]=g,C(x,n,t,o),x}function L(t){return t?a({values:(e,n)=>n.map(e=>null==e?"":t(e)),size:(t,e)=>e?7*Math.max(...e.map(t=>t.length))+12:40}):a()}function $(t,e){return[{},...t.map((t,n)=>{const{label:s,width:r,color:o,...i}=e[n]??{};return{label:s,stroke:t,width:r??2,...i}})]}function z(t,e){const{series:n=[],data:s,yRange:r,legend:o=!0,tooltip:i=!0,valueFormat:l,xFormat:c,...d}=e,g=h(s.length-1,n),{plugins:m,restOptions:b}=p(function(t,e,n,s){return!1!==e?[M({colors:t,isTimeScale:!0,valueFormat:n,xFormat:s})]:[]}(g,i,l,c),d),x=f(t,{axes:[a(),a()],plugins:m,series:T(g,n),scales:{x:{time:!0},y:{range:r}},...b},s,()=>z(t,e));return x[u]=g,C(x,n,t,o),x}function T(t,e){return[{},...t.map((t,n)=>{const{label:s,width:r,color:o,...i}=e[n]??{};return{label:s,stroke:t,fill:t+"28",width:r??2,...i}})]}function I(t,e){const{series:n=[],data:s,yRange:r,xFormat:o,legend:i=!0,tooltip:a=!0,valueFormat:l,...c}=e,d=h(s.length-1,n),{plugins:g,restOptions:m}=p(function(t,e,n,s){return!1!==e?[M({colors:t,isTimeScale:!0,xFormat:n,valueFormat:s})]:[]}(d,a,o,l),c),b=f(t,{axes:[R(o),V(l)],plugins:g,series:P(d,n),scales:{x:{time:!0,range:B(s)},y:{range:r}},...m},s,()=>I(t,e));return b[u]=d,C(b,n,t,i),b}function R(t){return a({values:t?(e,n)=>n.map(t):void 0})}function V(t){return t?a({values:(e,n)=>n.map(e=>null==e?"":t(e)),size:(t,e)=>e?7*Math.max(...e.map(t=>t.length))+12:40}):a()}function B(t){return(e,n,s)=>{const r=t[0].length,o=(s-n)/(r-1)/2;return r<=1?[n,s]:[n-o,s+o]}}function P(e,n){return[{},...e.map((e,s)=>({label:n[s]?.label,fill:e,width:0,paths:t.paths.bars({size:[.6,18,1]}),points:(n[s]??{}).points??{show:!1}}))]}const W=`11px ${s}`;function H(t,e){const{series:n=[],data:s,xRange:r,yRange:o,xLabel:i,yLabel:l,legend:c=!0,...d}=e,g=s.length-1,m=h(g,n),{plugins:b,restOptions:x}=p([(v=m,{hooks:{drawSeries:[G.bind(null,v)]}})],d);var v;const y=f(t,{axes:[a({label:i,labelFont:W}),a({label:l,labelFont:W})],plugins:b,series:D(g),scales:{x:{time:!1,range:r},y:{range:o}},...x},s,()=>H(t,e));return y[u]=m,C(y,n,t,c),y}function D(t){return[{},...Array.from({length:t},()=>d)]}function G(t,e,n){const s=e.ctx,r=t[n-1]+"cc";s.save(),s.fillStyle=r,e.data[n].forEach((t,n)=>{s.beginPath(),s.arc(e.valToPos(e.data[0][n],"x",!0),e.valToPos(t,"y",!0),3.5,0,2*Math.PI),s.fill()}),s.restore()}const N="var(--cu-interactive)",q="var(--cu-support-success)",Y="var(--cu-border-subtle)",J="var(--cu-text-primary)",K="var(--cu-text-secondary)",Q="var(--cu-text-helper)";function U(t){return`var(--cu-support-${t})`}const X=90,Z=14;const tt=Math.PI,et=130,nt=134;function st(t,{value:e=0,status:n,ticks:o=!0,thresholds:i=[],min:a=0,max:l=100,label:c,valueFormat:u,color:d}={}){const{svg:h,arcEl:p,valueLabelEl:f}=function(t,e,n,o){const i=ot("svg",{viewBox:"0 0 260 148",width:"100%"}),a=ot("path",{"stroke-width":Z,fill:"none"}),l=ot("text",{x:et,y:114,"text-anchor":"middle","dominant-baseline":"middle",fill:J,"font-size":36,"font-weight":300,"font-family":s});i.appendChild(function(){return ot("path",{d:rt(),stroke:Y,"stroke-width":Z,fill:"none"})}()),i.appendChild(a),t&&function(t,e){const n=e-t;return[0,.25,.5,.75,1].map(e=>t+e*n)}(e,n).forEach(t=>function(t,e,n,s){const o=(e-n)/(s-n),i=tt+o*Math.PI,a=79,l=101,c=113,u=Math.cos(i),d=Math.sin(i),h=ot("text",{x:(et+c*u).toFixed(3),y:(nt+c*d).toFixed(3),"text-anchor":"middle","dominant-baseline":"middle",fill:Q,"font-size":10,"font-family":r});t.appendChild(ot("line",{x1:(et+a*u).toFixed(3),y1:(nt+a*d).toFixed(3),x2:(et+l*u).toFixed(3),y2:(nt+l*d).toFixed(3),stroke:Q,"stroke-width":1.5})),h.textContent=e.toLocaleString(),t.appendChild(h)}(i,t,e,n));i.appendChild(l),o&&i.appendChild(function(t){const e=ot("text",{x:et,y:144,"text-anchor":"middle","dominant-baseline":"middle",fill:K,"font-size":12,"font-family":s});return e.textContent=t,e}(o));return{svg:i,arcEl:a,valueLabelEl:l}}(o,a,l,c);function g({value:t,status:e}={}){p.setAttribute("d",function(t,e,n){const s=(t-e)/(n-e),r=tt+s*Math.PI,o=(et+X*Math.cos(r)).toFixed(3),i=(nt+X*Math.sin(r)).toFixed(3);return s<=0?"":s>=1?rt():`M 40 134 A 90 90 0 0 1 ${o} ${i}`}(t,a,l)),p.setAttribute("stroke",d??function(t,e,n){if(e)return U(e);if(!n?.length)return N;const s=n.reduce((e,n)=>t>=n.value?n:e,null);return s?U(s.status):N}(t,e??n,i)),f.textContent=u?u(t):t}return t.appendChild(h),g({value:e}),{setValue:g,destroy:function(){h.remove()}}}function rt(){return["M 40 134","A 90 90 0 0 1 130 44","A 90 90 0 0 1 220 134"].join(" ")}function ot(t,e){const n=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.entries(e).forEach(([t,e])=>n.setAttribute(t,e)),n}const it={sm:"1.25rem",md:"2.5rem",lg:"5rem"};function at(t,{value:e=0,data:n,label:r,valueFormat:o,showValue:a=!0,sparkline:l=!0,color:c,size:u="md",align:d="left",verticalAlign:h="top"}={}){const p=c??i[0],g=function(t){const e=document.createElement("div");return Object.assign(e.style,{display:"flex",flexDirection:"column",width:"100%",height:"100%",overflow:"hidden",justifyContent:"center"===t?"center":"flex-start"}),e}(h);t.appendChild(g);const m=a?function(t,e,n,r,o){const i=document.createElement("div"),a=document.createElement("div");if(Object.assign(i.style,{padding:"1rem 1rem 0.5rem",display:"flex",flexDirection:"column",gap:"0.25rem"}),Object.assign(a.style,{fontSize:it[r],fontWeight:"300",lineHeight:"1",fontFamily:s,color:e,textAlign:o}),i.appendChild(a),n){const t=document.createElement("div");Object.assign(t.style,{fontSize:"0.75rem",fontFamily:s,color:K,textAlign:o}),t.textContent=n,i.appendChild(t)}return t.appendChild(i),a}(g,p,r,u,d):null;let b=n?[n[0].slice(),n[1].slice()]:null;const x=b&&b[0].length>1?b[0].at(-1)-b[0].at(-2):1;let v=null;if(l&&b){const t=function(t){const e=document.createElement("div");return Object.assign(e.style,{flex:"1",minHeight:"64px"}),t.appendChild(e),e}(g);v=function(t,e,n){const s=[{},{stroke:n,fill:n+"28",width:1.5,points:{show:!1}}];return f(t,{cursor:{show:!1},axes:[{show:!1},{show:!1}],padding:[4,0,4,0],series:s,scales:{x:{time:!0}}},e,null)}(t,b,p)}return m&&(m.textContent=o?o(e):e),{setValue:function({value:t}={}){m&&(m.textContent=o?o(t):t),v&&b&&(b[0].push(b[0].at(-1)+x),b[1].push(t),b[0].shift(),b[1].shift(),v.setData(b))}}}const lt=.08;function ct(t,e){const{data:n,bucketLabels:s,color:r,xTime:o=!0,tooltip:l=!0,valueFormat:c,...u}=e,d=r??i[0],h=n.length-1,g=function(t){let e=0;return t.slice(1).forEach(t=>{t.forEach(t=>{null!=t&&t>e&&(e=t)})}),e||1}(n),m=function(t){if(!t.startsWith("#"))return[69,137,255];const e=t.slice(1),n=3===e.length?e.split("").map(t=>t+t).join(""):e;return[parseInt(n.slice(0,2),16),parseInt(n.slice(2,4),16),parseInt(n.slice(4,6),16)]}(d),b=function(t,e,n){const s=t.slice(1);function r(r){const o=r.ctx,[i,a,l]=e;o.save(),o.beginPath(),o.rect(r.bbox.left,r.bbox.top,r.bbox.width,r.bbox.height),o.clip(),t[0].forEach((e,c)=>{const u=Math.round(r.valToPos(e,"x",!0)),d=t[0][c+1],h=void 0!==d?Math.round(r.valToPos(d,"x",!0)):Math.round(r.bbox.left+r.bbox.width),p=Math.max(1,h-u);s.forEach((t,e)=>{const s=t[c];if(!s)return;const d=lt+.92*(s/n);o.fillStyle=`rgba(${i}, ${a}, ${l}, ${d.toFixed(2)})`;const h=Math.round(r.valToPos(e+1,"y",!0)),f=Math.round(r.valToPos(e,"y",!0)),g=Math.max(1,f-h);o.fillRect(u,h,p,g)})}),o.restore()}return{hooks:{draw:[r]}}}(n,m,g),x=!1!==l?function(t,e,n,s,r,o){let i,a,l,c,u;return{hooks:{init:function(t){w(),i=document.createElement("div"),a=document.createElement("div"),l=document.createElement("div"),c=document.createElement("span"),u=document.createElement("span"),Object.assign(i.style,E),Object.assign(a.style,k),Object.assign(l.style,F),Object.assign(u.style,S),l.className=_,l.appendChild(c),l.appendChild(u),i.appendChild(a),i.appendChild(l),t.over.appendChild(i),t.over.addEventListener("mouseleave",()=>{i.style.display="none"}),t.over.addEventListener("mouseenter",()=>{i.style.display=null})},setCursor:function(d){const{left:h,top:p,idx:f}=d.cursor,g=t.length-1;if(null==f||h<0)return void(i.style.display="none");const m=d.posToVal(p,"y"),b=Math.max(0,Math.min(Math.floor(m),g-1)),x=t[b+1][f],v=lt+.92*(null!=x?x/o:0),[y,C,_]=r;a.textContent=O(t[0][f],n,null),c.textContent=e?e[b]??`Row ${b}`:`Row ${b}`,u.textContent=null==x?"—":A(x,s),l.style.borderLeft=`3px solid rgba(${y}, ${C}, ${_}, ${v.toFixed(2)})`;const w=d.over.getBoundingClientRect(),E=i.offsetWidth,k=w.left+h+16+E>window.innerWidth;i.style.display=null,i.style.left=k?h-16-E+"px":`${h+16}px`,i.style.top=p-20+"px"}}}}(n,s,o,c,m,g):null,v=x?[b,x]:[b],{plugins:y,restOptions:C}=p(v,u);return f(t,{plugins:y,series:ut(h),axes:[a(),dt(s,h)],scales:{x:{time:o},y:{range:[0,h]}},cursor:{x:!1,y:!1},...C},n,()=>ct(t,e))}function ut(t){return[{},...Array.from({length:t},()=>d)]}function dt(t,e){const n=Array.from({length:e},(t,e)=>e+.5);return a({splits:()=>n,values:(e,n)=>n.map((e,n)=>t?t[n]??"":String(n)),size:(t,e)=>e?7*Math.max(...e.map(t=>t?t.length:0))+12:40})}function ht(t,{series:e=[],min:n=0,max:o=100,color:i,thresholds:a=[],inverted:l=!1,valueFormat:c}={}){const u=function(){const t=document.createElement("div");return Object.assign(t.style,{display:"flex",flexDirection:"column",gap:"12px",padding:"1rem",width:"100%",boxSizing:"border-box"}),t}(),d=e.map(function(t,e){const i=function(t,e,n,o){const i=document.createElement("div"),a=document.createElement("span"),l=document.createElement("div"),c=document.createElement("div"),u=document.createElement("span");return Object.assign(i.style,{display:"grid",gridTemplateColumns:"minmax(0, max-content) 1fr max-content",alignItems:"center",gap:"12px"}),Object.assign(a.style,{fontSize:"12px",fontFamily:s,color:J,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"140px"}),Object.assign(l.style,{height:"8px",background:Y,borderRadius:"2px",overflow:"hidden"}),Object.assign(c.style,{height:"100%",borderRadius:"2px",transition:"width 0.2s ease, background 0.2s ease"}),Object.assign(u.style,{fontSize:"11px",fontFamily:r,color:J,minWidth:"40px",textAlign:"right",whiteSpace:"nowrap"}),a.title=e.label??"",a.textContent=e.label??"",l.setAttribute("role","meter"),l.setAttribute("aria-label",e.label??""),l.setAttribute("aria-valuemin",n),l.setAttribute("aria-valuemax",o),l.appendChild(c),i.appendChild(a),i.appendChild(l),i.appendChild(u),t.appendChild(i),{fillEl:c,valueEl:u,trackEl:l}}(u,t,n,o),a=t.value??0;return h(i,e,a,t.status),i});function h(t,s,r,u){const d=Math.max(0,Math.min((r-n)/(o-n),1)),h=function(t,e,n,s,r,o){const i=r??e?.status;return e?.color?e.color:n||("good"===i?q:i?U(i):s.length?o?function(t,e){const n=e.find(e=>t<e.value)??null;return n?U(n.status):q}(t,s):function(t,e){const n=e.reduce((e,n)=>t>=n.value?n:e,null);return n?U(n.status):q}(t,s):N)}(r,e[s],i,a,u,l);t.fillEl.style.width=100*d+"%",t.fillEl.style.background=h,t.valueEl.textContent=c?c(r):r.toLocaleString(),t.trackEl.setAttribute("aria-valuenow",r)}return t.appendChild(u),{setValue:function(t,{value:e,status:n}={}){const s=d[t];s&&h(s,t,e,n)}}}function pt(t,e,n={}){const s=Object.keys(n),r=class extends HTMLElement{static get observedAttributes(){return s}_chart=null;_options={};connectedCallback(){this._remount()}disconnectedCallback(){this._chart?.destroy(),this._chart=null}attributeChangedCallback(t,e,s){e!==s&&this._set(n[t],s)}_remount(){this._options.data&&(this._chart?.destroy(),this._chart=t(this,this._options))}_set(t,e){this._options[t]=e,this.isConnected&&this._remount()}};return e.forEach(t=>{Object.defineProperty(r.prototype,t,{get(){return this._options[t]},set(e){this._set(t,e)},enumerable:!0,configurable:!0})}),r}const ft=["data","series","yRange","legend","tooltip","valueFormat"];class gt extends(pt(j,[...ft,"cursor","plugins"],{legend:"legend"})){}class mt extends(pt(z,[...ft,"xFormat","cursor"],{legend:"legend"})){}class bt extends(pt(I,[...ft,"xFormat"],{legend:"legend"})){}class xt extends(pt(H,["data","series","xRange","yRange","xLabel","yLabel","legend"],{legend:"legend","x-label":"xLabel","y-label":"yLabel"})){}class vt extends HTMLElement{static get observedAttributes(){return["label","color","status"]}_gauge=null;_options={};connectedCallback(){this._remount()}attributeChangedCallback(t,e,n){e!==n&&this._set(t,n)}disconnectedCallback(){for(;this.firstChild;)this.removeChild(this.firstChild);this._gauge=null}_remount(){for(;this.firstChild;)this.removeChild(this.firstChild);this._gauge=st(this,this._options)}_set(t,e){this._options[t]=e,this.isConnected&&this._remount()}get value(){return this._options.value}set value(t){this._set("value",t)}get status(){return this._options.status}set status(t){this._set("status",t)}get ticks(){return this._options.ticks}set ticks(t){this._set("ticks",t)}get thresholds(){return this._options.thresholds}set thresholds(t){this._set("thresholds",t)}get min(){return this._options.min}set min(t){this._set("min",t)}get max(){return this._options.max}set max(t){this._set("max",t)}get label(){return this._options.label}set label(t){this._set("label",t)}get valueFormat(){return this._options.valueFormat}set valueFormat(t){this._set("valueFormat",t)}get color(){return this._options.color}set color(t){this._set("color",t)}setValue(t){this._gauge?.setValue(t)}}class yt extends HTMLElement{static get observedAttributes(){return["label","color","size","align","vertical-align"]}_stat=null;_options={};connectedCallback(){this._remount()}attributeChangedCallback(t,e,n){if(e===n)return;const s="vertical-align"===t?"verticalAlign":t;this._set(s,n)}disconnectedCallback(){for(;this.firstChild;)this.removeChild(this.firstChild);this._stat=null}_remount(){for(;this.firstChild;)this.removeChild(this.firstChild);this._stat=at(this,this._options)}_set(t,e){this._options[t]=e,this.isConnected&&this._remount()}get value(){return this._options.value}set value(t){this._options.value=t,this.isConnected&&this._stat&&this._stat.setValue({value:t})}get data(){return this._options.data}set data(t){this._set("data",t)}get label(){return this._options.label}set label(t){this._set("label",t)}get valueFormat(){return this._options.valueFormat}set valueFormat(t){this._set("valueFormat",t)}get showValue(){return this._options.showValue}set showValue(t){this._set("showValue",t)}get sparkline(){return this._options.sparkline}set sparkline(t){this._set("sparkline",t)}get color(){return this._options.color}set color(t){this._set("color",t)}get size(){return this._options.size}set size(t){this._set("size",t)}get align(){return this._options.align}set align(t){this._set("align",t)}get verticalAlign(){return this._options.verticalAlign}set verticalAlign(t){this._set("verticalAlign",t)}setValue(t){this._stat?.setValue(t)}}class Ct extends(pt(ct,["data","bucketLabels","color","xTime"],{color:"color"})){}class _t extends HTMLElement{static get observedAttributes(){return["color"]}_barGauge=null;_options={};connectedCallback(){this._remount()}attributeChangedCallback(t,e,n){e!==n&&this._set(t,n)}disconnectedCallback(){for(;this.firstChild;)this.removeChild(this.firstChild);this._barGauge=null}_remount(){for(;this.firstChild;)this.removeChild(this.firstChild);this._barGauge=ht(this,this._options)}_set(t,e){this._options[t]=e,this.isConnected&&this._remount()}get series(){return this._options.series}set series(t){this._set("series",t)}get min(){return this._options.min}set min(t){this._set("min",t)}get max(){return this._options.max}set max(t){this._set("max",t)}get color(){return this._options.color}set color(t){this._set("color",t)}get thresholds(){return this._options.thresholds}set thresholds(t){this._set("thresholds",t)}get inverted(){return this._options.inverted}set inverted(t){this._set("inverted",t)}get valueFormat(){return this._options.valueFormat}set valueFormat(t){this._set("valueFormat",t)}setValue(t,e){this._barGauge?.setValue(t,e)}}function wt(){if([["cu-line-chart",gt],["cu-area-chart",mt],["cu-bar-chart",bt],["cu-scatter-chart",xt],["cu-gauge",vt],["cu-stat",yt],["cu-heatmap",Ct],["cu-bar-gauge",_t]].forEach(([t,e])=>{customElements.get(t)||customElements.define(t,e)}),!document.getElementById("cu-wc-styles")){const t=document.createElement("style");t.id="cu-wc-styles",t.textContent="cu-line-chart,cu-area-chart,cu-bar-chart,cu-scatter-chart,cu-gauge,cu-stat,cu-heatmap,cu-bar-gauge{display:block}",document.head.appendChild(t)}}wt(),exports.CuAreaChart=mt,exports.CuBarChart=bt,exports.CuBarGauge=_t,exports.CuGauge=vt,exports.CuHeatmap=Ct,exports.CuLineChart=gt,exports.CuScatterChart=xt,exports.CuStat=yt,exports.register=wt;

package/dist/web-components.esm.js

@@ -0,0 +1 @@
+import t from"uplot";const e="cu-styles";if(!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.textContent=":root {\n  --cu-background: var(--cds-background, #ffffff);\n  --cu-layer-01: var(--cds-layer-01, #f4f4f4);\n  --cu-layer-02: var(--cds-layer-02, #ffffff);\n  --cu-text-primary: var(--cds-text-primary, #161616);\n  --cu-text-secondary: var(--cds-text-secondary, #525252);\n  --cu-text-helper: var(--cds-text-helper, #6f6f6f);\n  --cu-border-subtle: var(--cds-border-subtle-01, #c6c6c6);\n  --cu-border-subtle-02: var(--cds-border-subtle-02, #e0e0e0);\n  --cu-axis: var(--cds-border-strong-01, #8d8d8d);\n  --cu-interactive: var(--cds-interactive, #0f62fe);\n  --cu-support-error: var(--cds-support-error, #da1e28);\n  --cu-support-warning: var(--cds-support-warning, #f1c21b);\n  --cu-support-success: var(--cds-support-success, #24a148);\n  --cu-support-info: var(--cds-support-info, #0043ce);\n  --cu-layer: var(--cu-layer-01);\n  --cu-grid: rgba(0,0,0,0.07);\n}\n\n.cds--g90 {\n  --cu-grid: rgba(255,255,255,0.09);\n}\n\n.cds--g100 {\n  --cu-grid: rgba(255,255,255,0.07);\n}\n\n.cds--tile {\n  --cu-tooltip-bg: var(--cu-layer-01);\n}\n\n.u-select {\n  background: rgba(15, 98, 254, 0.1);\n  border-left: 1px solid rgba(15, 98, 254, 0.5);\n  border-right: 1px solid rgba(15, 98, 254, 0.5);\n}\n\n.cds--g90 .u-select,\n.cds--g100 .u-select {\n  background: rgba(69, 137, 255, 0.2);\n  border-left: 1px solid rgba(69, 137, 255, 0.65);\n  border-right: 1px solid rgba(69, 137, 255, 0.65);\n}\n",document.head.appendChild(t)}const n={white:{"--cu-background":"#ffffff","--cu-layer-01":"#f4f4f4","--cu-layer-02":"#ffffff","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#c6c6c6","--cu-border-subtle-02":"#e0e0e0","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g10:{"--cu-background":"#f4f4f4","--cu-layer-01":"#ffffff","--cu-layer-02":"#f4f4f4","--cu-text-primary":"#161616","--cu-text-secondary":"#525252","--cu-text-helper":"#6f6f6f","--cu-border-subtle":"#e0e0e0","--cu-border-subtle-02":"#c6c6c6","--cu-axis":"#8d8d8d","--cu-interactive":"#0f62fe","--cu-support-error":"#da1e28","--cu-support-warning":"#f1c21b","--cu-support-success":"#24a148","--cu-support-info":"#0043ce","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(0,0,0,0.07)"},g90:{"--cu-background":"#262626","--cu-layer-01":"#393939","--cu-layer-02":"#525252","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#c6c6c6","--cu-border-subtle":"#6f6f6f","--cu-border-subtle-02":"#8d8d8d","--cu-axis":"#8d8d8d","--cu-interactive":"#4589ff","--cu-support-error":"#ff8389","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.09)"},g100:{"--cu-background":"#161616","--cu-layer-01":"#262626","--cu-layer-02":"#393939","--cu-text-primary":"#f4f4f4","--cu-text-secondary":"#c6c6c6","--cu-text-helper":"#a8a8a8","--cu-border-subtle":"#525252","--cu-border-subtle-02":"#6f6f6f","--cu-axis":"#6f6f6f","--cu-interactive":"#4589ff","--cu-support-error":"#fa4d56","--cu-support-warning":"#f1c21b","--cu-support-success":"#42be65","--cu-support-info":"#4589ff","--cu-layer":"var(--cu-layer-01)","--cu-grid":"rgba(255,255,255,0.07)"}},s="IBM Plex Sans, sans-serif",r="IBM Plex Mono, monospace",o={"cds--white":"white","cds--g10":"g10","cds--g90":"g90","cds--g100":"g100"},i=["#4589ff","#3ddbd9","#be95ff","#42be65","#ff832b","#f1c21b","#ff8389"];function a(t={}){const e=l("--cu-axis"),n=l("--cu-grid");return{stroke:e,ticks:{stroke:n,width:1},grid:{stroke:n,width:1},font:`11px ${r}`,...t}}function l(t){const e=getComputedStyle(document.documentElement),s=n[function(){const t=Object.keys(o).find(t=>document.documentElement.classList.contains(t));return o[t]??"white"}()];return e.getPropertyValue(t).trim()||s[t]||""}const c="cu-theme-change";const u=Symbol("carbonSeriesColors"),d={stroke:"transparent",fill:"transparent",paths:()=>null};function h(t,e){return Array.from({length:t},(t,n)=>(e[n]??{}).color??i[n%i.length])}function p(t,e){const{plugins:n=[],...s}=e;return{plugins:[...t,...n],restOptions:s}}function f(e,n,s,r){const o=e.getBoundingClientRect().width||e.clientWidth||300,i=e.clientHeight||170,a=new t({width:o,height:i,background:"transparent",padding:[8,8,0,0],legend:{show:!1},cursor:{show:!0,drag:{x:!0,y:!1,uni:10}},...n},s,e),l=new ResizeObserver(t=>{const n=t[0]?.contentRect.width;n>0&&a.setSize({width:n,height:e.clientHeight})});l.observe(e);const u=a.destroy.bind(a);let d=null;var h;return r&&(h=()=>{l.disconnect(),d(),u();const t=r(e);t&&e.dispatchEvent(new CustomEvent("cu-chart-recreated",{detail:{chart:t}}))},document.addEventListener(c,h),d=()=>document.removeEventListener(c,h)),a.destroy=()=>{l.disconnect(),d&&d(),u()},a}const g={display:"flex",flexWrap:"wrap",gap:"12px"},m={marginTop:"8px",paddingTop:"8px",borderTop:"0.5px solid var(--cu-border-subtle)"},b={marginBottom:"8px",paddingBottom:"8px",borderBottom:"0.5px solid var(--cu-border-subtle)"},x={display:"flex",alignItems:"center",gap:"5px",fontSize:"11px",fontFamily:"inherit",color:"var(--cu-text-secondary)",background:"none",border:"none",padding:"0",cursor:"pointer"},v={width:"16px",height:"2px",flexShrink:"0"};function y(t,e){Object.assign(t.style,e)}function _(t,e,n,s){if(!1===s)return;const r=e.map(t=>t?.label);r.some(Boolean)&&function(t,e,n,s="bottom"){const r=t[u]??[],o=document.createElement("div"),i=[];y(o,g),y(o,"top"===s?b:m),e.forEach((e,n)=>{if(!e)return;const{item:s,handler:a}=function(t,e,n,s){const r=document.createElement("button"),o=document.createElement("span"),i=function(t){return{chart:null,handleEvent(e){const n=!1!==this.chart.series[t].show;this.chart.setSeries(t,{show:!n}),e.currentTarget.style.opacity=n?"0.3":""}}}(n);i.chart=t,s&&(o.style.background=s);return y(r,x),y(o,v),r.appendChild(o),r.appendChild(document.createTextNode(e)),r.addEventListener("click",i),{item:r,handler:i}}(t,e,n+1,r[n]);o.appendChild(s),i.push([s,a])}),n.insertAdjacentElement("top"===s?"beforebegin":"afterend",o),t.hooks.destroy=t.hooks.destroy??[],t.hooks.destroy.push(()=>{i.forEach(([t,e])=>t.removeEventListener("click",e)),o.remove()})}(t,r,n,"top"===s?"top":"bottom")}const C="cu-tooltip__row";function w(){if(document.getElementById("cu-tooltip-styles"))return;const t=document.createElement("style");t.id="cu-tooltip-styles",t.textContent=`.${C}:not(:last-child) { border-bottom: 1px solid var(--cu-grid); }`,document.head.appendChild(t)}const E={position:"absolute",pointerEvents:"none",background:"var(--cu-tooltip-bg, var(--cu-background))",boxShadow:"0 2px 6px rgba(0, 0, 0, 0.3)",fontSize:"12px",fontFamily:s,color:"var(--cu-text-primary)",minWidth:"160px",zIndex:"100",display:"none"},k={padding:"8px 12px 6px",borderBottom:"1px solid var(--cu-grid)",fontFamily:r,fontSize:"11px",color:"var(--cu-text-primary)"},F={display:"flex",alignItems:"center",justifyContent:"space-between",gap:"24px",padding:"5px 12px 5px 9px"},S={fontFamily:r,fontSize:"11px",color:"var(--cu-text-primary)"};function M({colors:t,isTimeScale:e=!1,xFormat:n,valueFormat:s}={}){let r,o,i;return{hooks:{init:function(e){w(),r=document.createElement("div"),o=document.createElement("div"),Object.assign(r.style,E),Object.assign(o.style,k),r.appendChild(o),i=e.series.slice(1).map((e,n)=>{const s=t[n],o=document.createElement("div"),i=document.createElement("span"),a=document.createElement("span");return o.className=C,Object.assign(o.style,F),o.style.borderLeft=`3px solid ${s}`,i.textContent=null!=e.label?`${e.label} `:`Series ${n+1} `,Object.assign(a.style,S),o.appendChild(i),o.appendChild(a),r.appendChild(o),{row:o,valueEl:a,seriesIndex:n+1}}),r.style.bottom="8px",e.over.appendChild(r),e.over.addEventListener("mouseleave",()=>{r.style.display="none"}),e.over.addEventListener("mouseenter",()=>{r.style.display=null})},setCursor:function(t){const{left:a,idx:l}=t.cursor,c=t.over.getBoundingClientRect(),u=r.offsetWidth,d=c.left+a+16+u>window.innerWidth;null==l||a<0?r.style.display="none":(r.style.display=null,o.textContent=O(t.data[0][l],e,n),i.forEach(({row:e,valueEl:n,seriesIndex:r})=>{const o=t.series[r],i=t.data[r][l];o?.show?(e.style.display=null,n.textContent=null==i?"—":j(i,s)):e.style.display="none"}),r.style.left=d?a-16-u+"px":`${a+16}px`)}}}}function O(t,e,n){if(n)return n(t);if(e){const e=new Date(1e3*t),n=t=>String(t).padStart(2,"0");return`${e.getFullYear()}-${n(e.getMonth()+1)}-${n(e.getDate())} ${n(e.getHours())}:${n(e.getMinutes())}`}return String(t)}function j(t,e){return e?e(t):t.toLocaleString()}function A(t,e){const{series:n=[],data:s,yRange:r,legend:o=!0,tooltip:i=!0,valueFormat:l,xFormat:c,...d}=e,g=h(s.length-1,n),{plugins:m,restOptions:b}=p(function(t,e,n,s){return!1!==e?[M({colors:t,isTimeScale:!0,valueFormat:n,xFormat:s})]:[]}(g,i,l,c),d),x=f(t,{axes:[a(),L(l)],plugins:m,series:$(g,n),scales:{x:{time:!0},y:{range:r}},...b},s,()=>A(t,e));return x[u]=g,_(x,n,t,o),x}function L(t){return t?a({values:(e,n)=>n.map(e=>null==e?"":t(e)),size:(t,e)=>e?7*Math.max(...e.map(t=>t.length))+12:40}):a()}function $(t,e){return[{},...t.map((t,n)=>{const{label:s,width:r,color:o,...i}=e[n]??{};return{label:s,stroke:t,width:r??2,...i}})]}function z(t,e){const{series:n=[],data:s,yRange:r,legend:o=!0,tooltip:i=!0,valueFormat:l,xFormat:c,...d}=e,g=h(s.length-1,n),{plugins:m,restOptions:b}=p(function(t,e,n,s){return!1!==e?[M({colors:t,isTimeScale:!0,valueFormat:n,xFormat:s})]:[]}(g,i,l,c),d),x=f(t,{axes:[a(),a()],plugins:m,series:T(g,n),scales:{x:{time:!0},y:{range:r}},...b},s,()=>z(t,e));return x[u]=g,_(x,n,t,o),x}function T(t,e){return[{},...t.map((t,n)=>{const{label:s,width:r,color:o,...i}=e[n]??{};return{label:s,stroke:t,fill:t+"28",width:r??2,...i}})]}function I(t,e){const{series:n=[],data:s,yRange:r,xFormat:o,legend:i=!0,tooltip:a=!0,valueFormat:l,...c}=e,d=h(s.length-1,n),{plugins:g,restOptions:m}=p(function(t,e,n,s){return!1!==e?[M({colors:t,isTimeScale:!0,xFormat:n,valueFormat:s})]:[]}(d,a,o,l),c),b=f(t,{axes:[R(o),V(l)],plugins:g,series:B(d,n),scales:{x:{time:!0,range:P(s)},y:{range:r}},...m},s,()=>I(t,e));return b[u]=d,_(b,n,t,i),b}function R(t){return a({values:t?(e,n)=>n.map(t):void 0})}function V(t){return t?a({values:(e,n)=>n.map(e=>null==e?"":t(e)),size:(t,e)=>e?7*Math.max(...e.map(t=>t.length))+12:40}):a()}function P(t){return(e,n,s)=>{const r=t[0].length,o=(s-n)/(r-1)/2;return r<=1?[n,s]:[n-o,s+o]}}function B(e,n){return[{},...e.map((e,s)=>({label:n[s]?.label,fill:e,width:0,paths:t.paths.bars({size:[.6,18,1]}),points:(n[s]??{}).points??{show:!1}}))]}const W=`11px ${s}`;function H(t,e){const{series:n=[],data:s,xRange:r,yRange:o,xLabel:i,yLabel:l,legend:c=!0,...d}=e,g=s.length-1,m=h(g,n),{plugins:b,restOptions:x}=p([(v=m,{hooks:{drawSeries:[G.bind(null,v)]}})],d);var v;const y=f(t,{axes:[a({label:i,labelFont:W}),a({label:l,labelFont:W})],plugins:b,series:D(g),scales:{x:{time:!1,range:r},y:{range:o}},...x},s,()=>H(t,e));return y[u]=m,_(y,n,t,c),y}function D(t){return[{},...Array.from({length:t},()=>d)]}function G(t,e,n){const s=e.ctx,r=t[n-1]+"cc";s.save(),s.fillStyle=r,e.data[n].forEach((t,n)=>{s.beginPath(),s.arc(e.valToPos(e.data[0][n],"x",!0),e.valToPos(t,"y",!0),3.5,0,2*Math.PI),s.fill()}),s.restore()}const N="var(--cu-interactive)",Y="var(--cu-support-success)",q="var(--cu-border-subtle)",J="var(--cu-text-primary)",K="var(--cu-text-secondary)",Q="var(--cu-text-helper)";function U(t){return`var(--cu-support-${t})`}const X=90,Z=14;const tt=Math.PI,et=130,nt=134;function st(t,{value:e=0,status:n,ticks:o=!0,thresholds:i=[],min:a=0,max:l=100,label:c,valueFormat:u,color:d}={}){const{svg:h,arcEl:p,valueLabelEl:f}=function(t,e,n,o){const i=ot("svg",{viewBox:"0 0 260 148",width:"100%"}),a=ot("path",{"stroke-width":Z,fill:"none"}),l=ot("text",{x:et,y:114,"text-anchor":"middle","dominant-baseline":"middle",fill:J,"font-size":36,"font-weight":300,"font-family":s});i.appendChild(function(){return ot("path",{d:rt(),stroke:q,"stroke-width":Z,fill:"none"})}()),i.appendChild(a),t&&function(t,e){const n=e-t;return[0,.25,.5,.75,1].map(e=>t+e*n)}(e,n).forEach(t=>function(t,e,n,s){const o=(e-n)/(s-n),i=tt+o*Math.PI,a=79,l=101,c=113,u=Math.cos(i),d=Math.sin(i),h=ot("text",{x:(et+c*u).toFixed(3),y:(nt+c*d).toFixed(3),"text-anchor":"middle","dominant-baseline":"middle",fill:Q,"font-size":10,"font-family":r});t.appendChild(ot("line",{x1:(et+a*u).toFixed(3),y1:(nt+a*d).toFixed(3),x2:(et+l*u).toFixed(3),y2:(nt+l*d).toFixed(3),stroke:Q,"stroke-width":1.5})),h.textContent=e.toLocaleString(),t.appendChild(h)}(i,t,e,n));i.appendChild(l),o&&i.appendChild(function(t){const e=ot("text",{x:et,y:144,"text-anchor":"middle","dominant-baseline":"middle",fill:K,"font-size":12,"font-family":s});return e.textContent=t,e}(o));return{svg:i,arcEl:a,valueLabelEl:l}}(o,a,l,c);function g({value:t,status:e}={}){p.setAttribute("d",function(t,e,n){const s=(t-e)/(n-e),r=tt+s*Math.PI,o=(et+X*Math.cos(r)).toFixed(3),i=(nt+X*Math.sin(r)).toFixed(3);return s<=0?"":s>=1?rt():`M 40 134 A 90 90 0 0 1 ${o} ${i}`}(t,a,l)),p.setAttribute("stroke",d??function(t,e,n){if(e)return U(e);if(!n?.length)return N;const s=n.reduce((e,n)=>t>=n.value?n:e,null);return s?U(s.status):N}(t,e??n,i)),f.textContent=u?u(t):t}return t.appendChild(h),g({value:e}),{setValue:g,destroy:function(){h.remove()}}}function rt(){return["M 40 134","A 90 90 0 0 1 130 44","A 90 90 0 0 1 220 134"].join(" ")}function ot(t,e){const n=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.entries(e).forEach(([t,e])=>n.setAttribute(t,e)),n}const it={sm:"1.25rem",md:"2.5rem",lg:"5rem"};function at(t,{value:e=0,data:n,label:r,valueFormat:o,showValue:a=!0,sparkline:l=!0,color:c,size:u="md",align:d="left",verticalAlign:h="top"}={}){const p=c??i[0],g=function(t){const e=document.createElement("div");return Object.assign(e.style,{display:"flex",flexDirection:"column",width:"100%",height:"100%",overflow:"hidden",justifyContent:"center"===t?"center":"flex-start"}),e}(h);t.appendChild(g);const m=a?function(t,e,n,r,o){const i=document.createElement("div"),a=document.createElement("div");if(Object.assign(i.style,{padding:"1rem 1rem 0.5rem",display:"flex",flexDirection:"column",gap:"0.25rem"}),Object.assign(a.style,{fontSize:it[r],fontWeight:"300",lineHeight:"1",fontFamily:s,color:e,textAlign:o}),i.appendChild(a),n){const t=document.createElement("div");Object.assign(t.style,{fontSize:"0.75rem",fontFamily:s,color:K,textAlign:o}),t.textContent=n,i.appendChild(t)}return t.appendChild(i),a}(g,p,r,u,d):null;let b=n?[n[0].slice(),n[1].slice()]:null;const x=b&&b[0].length>1?b[0].at(-1)-b[0].at(-2):1;let v=null;if(l&&b){const t=function(t){const e=document.createElement("div");return Object.assign(e.style,{flex:"1",minHeight:"64px"}),t.appendChild(e),e}(g);v=function(t,e,n){const s=[{},{stroke:n,fill:n+"28",width:1.5,points:{show:!1}}];return f(t,{cursor:{show:!1},axes:[{show:!1},{show:!1}],padding:[4,0,4,0],series:s,scales:{x:{time:!0}}},e,null)}(t,b,p)}return m&&(m.textContent=o?o(e):e),{setValue:function({value:t}={}){m&&(m.textContent=o?o(t):t),v&&b&&(b[0].push(b[0].at(-1)+x),b[1].push(t),b[0].shift(),b[1].shift(),v.setData(b))}}}const lt=.08;function ct(t,e){const{data:n,bucketLabels:s,color:r,xTime:o=!0,tooltip:l=!0,valueFormat:c,...u}=e,d=r??i[0],h=n.length-1,g=function(t){let e=0;return t.slice(1).forEach(t=>{t.forEach(t=>{null!=t&&t>e&&(e=t)})}),e||1}(n),m=function(t){if(!t.startsWith("#"))return[69,137,255];const e=t.slice(1),n=3===e.length?e.split("").map(t=>t+t).join(""):e;return[parseInt(n.slice(0,2),16),parseInt(n.slice(2,4),16),parseInt(n.slice(4,6),16)]}(d),b=function(t,e,n){const s=t.slice(1);function r(r){const o=r.ctx,[i,a,l]=e;o.save(),o.beginPath(),o.rect(r.bbox.left,r.bbox.top,r.bbox.width,r.bbox.height),o.clip(),t[0].forEach((e,c)=>{const u=Math.round(r.valToPos(e,"x",!0)),d=t[0][c+1],h=void 0!==d?Math.round(r.valToPos(d,"x",!0)):Math.round(r.bbox.left+r.bbox.width),p=Math.max(1,h-u);s.forEach((t,e)=>{const s=t[c];if(!s)return;const d=lt+.92*(s/n);o.fillStyle=`rgba(${i}, ${a}, ${l}, ${d.toFixed(2)})`;const h=Math.round(r.valToPos(e+1,"y",!0)),f=Math.round(r.valToPos(e,"y",!0)),g=Math.max(1,f-h);o.fillRect(u,h,p,g)})}),o.restore()}return{hooks:{draw:[r]}}}(n,m,g),x=!1!==l?function(t,e,n,s,r,o){let i,a,l,c,u;return{hooks:{init:function(t){w(),i=document.createElement("div"),a=document.createElement("div"),l=document.createElement("div"),c=document.createElement("span"),u=document.createElement("span"),Object.assign(i.style,E),Object.assign(a.style,k),Object.assign(l.style,F),Object.assign(u.style,S),l.className=C,l.appendChild(c),l.appendChild(u),i.appendChild(a),i.appendChild(l),t.over.appendChild(i),t.over.addEventListener("mouseleave",()=>{i.style.display="none"}),t.over.addEventListener("mouseenter",()=>{i.style.display=null})},setCursor:function(d){const{left:h,top:p,idx:f}=d.cursor,g=t.length-1;if(null==f||h<0)return void(i.style.display="none");const m=d.posToVal(p,"y"),b=Math.max(0,Math.min(Math.floor(m),g-1)),x=t[b+1][f],v=lt+.92*(null!=x?x/o:0),[y,_,C]=r;a.textContent=O(t[0][f],n,null),c.textContent=e?e[b]??`Row ${b}`:`Row ${b}`,u.textContent=null==x?"—":j(x,s),l.style.borderLeft=`3px solid rgba(${y}, ${_}, ${C}, ${v.toFixed(2)})`;const w=d.over.getBoundingClientRect(),E=i.offsetWidth,k=w.left+h+16+E>window.innerWidth;i.style.display=null,i.style.left=k?h-16-E+"px":`${h+16}px`,i.style.top=p-20+"px"}}}}(n,s,o,c,m,g):null,v=x?[b,x]:[b],{plugins:y,restOptions:_}=p(v,u);return f(t,{plugins:y,series:ut(h),axes:[a(),dt(s,h)],scales:{x:{time:o},y:{range:[0,h]}},cursor:{x:!1,y:!1},..._},n,()=>ct(t,e))}function ut(t){return[{},...Array.from({length:t},()=>d)]}function dt(t,e){const n=Array.from({length:e},(t,e)=>e+.5);return a({splits:()=>n,values:(e,n)=>n.map((e,n)=>t?t[n]??"":String(n)),size:(t,e)=>e?7*Math.max(...e.map(t=>t?t.length:0))+12:40})}function ht(t,{series:e=[],min:n=0,max:o=100,color:i,thresholds:a=[],inverted:l=!1,valueFormat:c}={}){const u=function(){const t=document.createElement("div");return Object.assign(t.style,{display:"flex",flexDirection:"column",gap:"12px",padding:"1rem",width:"100%",boxSizing:"border-box"}),t}(),d=e.map(function(t,e){const i=function(t,e,n,o){const i=document.createElement("div"),a=document.createElement("span"),l=document.createElement("div"),c=document.createElement("div"),u=document.createElement("span");return Object.assign(i.style,{display:"grid",gridTemplateColumns:"minmax(0, max-content) 1fr max-content",alignItems:"center",gap:"12px"}),Object.assign(a.style,{fontSize:"12px",fontFamily:s,color:J,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"140px"}),Object.assign(l.style,{height:"8px",background:q,borderRadius:"2px",overflow:"hidden"}),Object.assign(c.style,{height:"100%",borderRadius:"2px",transition:"width 0.2s ease, background 0.2s ease"}),Object.assign(u.style,{fontSize:"11px",fontFamily:r,color:J,minWidth:"40px",textAlign:"right",whiteSpace:"nowrap"}),a.title=e.label??"",a.textContent=e.label??"",l.setAttribute("role","meter"),l.setAttribute("aria-label",e.label??""),l.setAttribute("aria-valuemin",n),l.setAttribute("aria-valuemax",o),l.appendChild(c),i.appendChild(a),i.appendChild(l),i.appendChild(u),t.appendChild(i),{fillEl:c,valueEl:u,trackEl:l}}(u,t,n,o),a=t.value??0;return h(i,e,a,t.status),i});function h(t,s,r,u){const d=Math.max(0,Math.min((r-n)/(o-n),1)),h=function(t,e,n,s,r,o){const i=r??e?.status;return e?.color?e.color:n||("good"===i?Y:i?U(i):s.length?o?function(t,e){const n=e.find(e=>t<e.value)??null;return n?U(n.status):Y}(t,s):function(t,e){const n=e.reduce((e,n)=>t>=n.value?n:e,null);return n?U(n.status):Y}(t,s):N)}(r,e[s],i,a,u,l);t.fillEl.style.width=100*d+"%",t.fillEl.style.background=h,t.valueEl.textContent=c?c(r):r.toLocaleString(),t.trackEl.setAttribute("aria-valuenow",r)}return t.appendChild(u),{setValue:function(t,{value:e,status:n}={}){const s=d[t];s&&h(s,t,e,n)}}}function pt(t,e,n={}){const s=Object.keys(n),r=class extends HTMLElement{static get observedAttributes(){return s}_chart=null;_options={};connectedCallback(){this._remount()}disconnectedCallback(){this._chart?.destroy(),this._chart=null}attributeChangedCallback(t,e,s){e!==s&&this._set(n[t],s)}_remount(){this._options.data&&(this._chart?.destroy(),this._chart=t(this,this._options))}_set(t,e){this._options[t]=e,this.isConnected&&this._remount()}};return e.forEach(t=>{Object.defineProperty(r.prototype,t,{get(){return this._options[t]},set(e){this._set(t,e)},enumerable:!0,configurable:!0})}),r}const ft=["data","series","yRange","legend","tooltip","valueFormat"];class gt extends(pt(A,[...ft,"cursor","plugins"],{legend:"legend"})){}class mt extends(pt(z,[...ft,"xFormat","cursor"],{legend:"legend"})){}class bt extends(pt(I,[...ft,"xFormat"],{legend:"legend"})){}class xt extends(pt(H,["data","series","xRange","yRange","xLabel","yLabel","legend"],{legend:"legend","x-label":"xLabel","y-label":"yLabel"})){}class vt extends HTMLElement{static get observedAttributes(){return["label","color","status"]}_gauge=null;_options={};connectedCallback(){this._remount()}attributeChangedCallback(t,e,n){e!==n&&this._set(t,n)}disconnectedCallback(){for(;this.firstChild;)this.removeChild(this.firstChild);this._gauge=null}_remount(){for(;this.firstChild;)this.removeChild(this.firstChild);this._gauge=st(this,this._options)}_set(t,e){this._options[t]=e,this.isConnected&&this._remount()}get value(){return this._options.value}set value(t){this._set("value",t)}get status(){return this._options.status}set status(t){this._set("status",t)}get ticks(){return this._options.ticks}set ticks(t){this._set("ticks",t)}get thresholds(){return this._options.thresholds}set thresholds(t){this._set("thresholds",t)}get min(){return this._options.min}set min(t){this._set("min",t)}get max(){return this._options.max}set max(t){this._set("max",t)}get label(){return this._options.label}set label(t){this._set("label",t)}get valueFormat(){return this._options.valueFormat}set valueFormat(t){this._set("valueFormat",t)}get color(){return this._options.color}set color(t){this._set("color",t)}setValue(t){this._gauge?.setValue(t)}}class yt extends HTMLElement{static get observedAttributes(){return["label","color","size","align","vertical-align"]}_stat=null;_options={};connectedCallback(){this._remount()}attributeChangedCallback(t,e,n){if(e===n)return;const s="vertical-align"===t?"verticalAlign":t;this._set(s,n)}disconnectedCallback(){for(;this.firstChild;)this.removeChild(this.firstChild);this._stat=null}_remount(){for(;this.firstChild;)this.removeChild(this.firstChild);this._stat=at(this,this._options)}_set(t,e){this._options[t]=e,this.isConnected&&this._remount()}get value(){return this._options.value}set value(t){this._options.value=t,this.isConnected&&this._stat&&this._stat.setValue({value:t})}get data(){return this._options.data}set data(t){this._set("data",t)}get label(){return this._options.label}set label(t){this._set("label",t)}get valueFormat(){return this._options.valueFormat}set valueFormat(t){this._set("valueFormat",t)}get showValue(){return this._options.showValue}set showValue(t){this._set("showValue",t)}get sparkline(){return this._options.sparkline}set sparkline(t){this._set("sparkline",t)}get color(){return this._options.color}set color(t){this._set("color",t)}get size(){return this._options.size}set size(t){this._set("size",t)}get align(){return this._options.align}set align(t){this._set("align",t)}get verticalAlign(){return this._options.verticalAlign}set verticalAlign(t){this._set("verticalAlign",t)}setValue(t){this._stat?.setValue(t)}}class _t extends(pt(ct,["data","bucketLabels","color","xTime"],{color:"color"})){}class Ct extends HTMLElement{static get observedAttributes(){return["color"]}_barGauge=null;_options={};connectedCallback(){this._remount()}attributeChangedCallback(t,e,n){e!==n&&this._set(t,n)}disconnectedCallback(){for(;this.firstChild;)this.removeChild(this.firstChild);this._barGauge=null}_remount(){for(;this.firstChild;)this.removeChild(this.firstChild);this._barGauge=ht(this,this._options)}_set(t,e){this._options[t]=e,this.isConnected&&this._remount()}get series(){return this._options.series}set series(t){this._set("series",t)}get min(){return this._options.min}set min(t){this._set("min",t)}get max(){return this._options.max}set max(t){this._set("max",t)}get color(){return this._options.color}set color(t){this._set("color",t)}get thresholds(){return this._options.thresholds}set thresholds(t){this._set("thresholds",t)}get inverted(){return this._options.inverted}set inverted(t){this._set("inverted",t)}get valueFormat(){return this._options.valueFormat}set valueFormat(t){this._set("valueFormat",t)}setValue(t,e){this._barGauge?.setValue(t,e)}}function wt(){if([["cu-line-chart",gt],["cu-area-chart",mt],["cu-bar-chart",bt],["cu-scatter-chart",xt],["cu-gauge",vt],["cu-stat",yt],["cu-heatmap",_t],["cu-bar-gauge",Ct]].forEach(([t,e])=>{customElements.get(t)||customElements.define(t,e)}),!document.getElementById("cu-wc-styles")){const t=document.createElement("style");t.id="cu-wc-styles",t.textContent="cu-line-chart,cu-area-chart,cu-bar-chart,cu-scatter-chart,cu-gauge,cu-stat,cu-heatmap,cu-bar-gauge{display:block}",document.head.appendChild(t)}}wt();export{mt as CuAreaChart,bt as CuBarChart,Ct as CuBarGauge,vt as CuGauge,_t as CuHeatmap,gt as CuLineChart,xt as CuScatterChart,yt as CuStat,wt as register};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "carbon-uplot",
+  "version": "1.0.0",
+  "description": "IBM Carbon design system chart components built on uPlot",
+  "type": "module",
+  "main": "dist/carbon-uplot.cjs.js",
+  "module": "dist/carbon-uplot.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/carbon-uplot.esm.js",
+      "require": "./dist/carbon-uplot.cjs.js"
+    },
+    "./react": {
+      "import": "./dist/react.esm.js",
+      "require": "./dist/react.cjs.js"
+    },
+    "./web-components": {
+      "import": "./dist/web-components.esm.js",
+      "require": "./dist/web-components.cjs.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "ibm",
+    "carbon",
+    "uplot",
+    "charts",
+    "dataviz"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/grommett/carbon-uplot.git"
+  },
+  "homepage": "https://grommett.github.io/carbon-uplot",
+  "bugs": {
+    "url": "https://github.com/grommett/carbon-uplot/issues"
+  },
+  "scripts": {
+    "build": "npm run generate:themes && rollup -c",
+    "generate:themes": "node scripts/generate-themes.js",
+    "dev": "npm run generate:themes && (rollup -c --watch & eleventy --serve --port 3131)",
+    "test": "npm run build && (npx serve . --listen 3132 & sleep 1 && open http://localhost:3132/src/index.test.html http://localhost:3132/src/react.test.html http://localhost:3132/src/web-components.test.html)",
+    "demo": "npm run build && eleventy --serve --port 3131",
+    "demo:build": "npm run build && eleventy",
+    "format": "prettier --write \"src/**/*.js\" \"demo/**/*.js\" \"demo/**/*.html\""
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "^3.1.5",
+    "@carbon/styles": "^1.104.0",
+    "@carbon/themes": "^11.71.0",
+    "@rollup/plugin-terser": "^1.0.0",
+    "prettier": "^3.8.2",
+    "prettier-plugin-jsdoc": "^1.8.0",
+    "rollup": "^4.60.1"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "uplot": "^1.6.32"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  }
+}