@apipass/design-system 7.2.0 → 7.3.1

package/dist/lib/ui/components/charts/TopList/TopList.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),w=require("../../../../vendor/clsx/dist/clsx.cjs"),c=require("react"),C=require("../chart-palette.cjs"),_=require("../useChartInstance.cjs"),g=require("./top-list-option.cjs");;/* empty css               */const x=["value"],q=C.CHART_SERIES_COLOR_TOKENS[0];function M(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function A(t,u){const a=new Set(t.map(e=>e.id)),o=u.filter(e=>a.has(e)),d=t.map(e=>e.id).filter(e=>!o.includes(e));return[...o,...d]}function j({items:t,sort:u="desc",total:a,valueDisplay:o=x,valueFormatter:d,colorToken:e=q,className:L,...T}){const{containerRef:f,chart:p,theme:l,resolveSeriesColor:h}=_.useChartInstance(),R=c.useRef(!1),v=c.useRef([]),[O,m]=c.useState(0);c.useEffect(()=>{const r=f.current;if(!r)return;const s=new ResizeObserver(()=>m(r.clientHeight));return s.observe(r),()=>s.disconnect()},[f]);const S=O>0,E=g.labeledRowStepFor(O,t.length),I=c.useMemo(()=>{const r=h(e),s=[];return t.forEach(i=>{const n=(i.colorToken?h(i.colorToken):void 0)??r;n&&s.push([i.id,n])}),Object.fromEntries(s)},[t,e,l,h]);return c.useEffect(()=>{if(!p||!l||!S)return;const r=R.current&&!M();v.current=A(t,v.current);const s=new Map(t.map(n=>[n.id,n])),i=v.current.map(n=>s.get(n));p.setOption(g.buildTopListOption({items:i,sort:u,total:a,valueDisplay:o,theme:l,colorsByItemId:I,animate:r,labeledRowStep:E,valueFormatter:d}),{replaceMerge:["series","yAxis"]}),R.current=!0},[p,l,t,u,a,o,I,S,E,d]),b.jsx("div",{className:w.clsx("top-list",L),...T,children:b.jsx("div",{ref:f,className:"top-list__canvas"})})}exports.TopList=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),w=require("../../../../vendor/clsx/dist/clsx.cjs"),c=require("react"),_=require("../chart-palette.cjs"),q=require("../useChartInstance.cjs"),x=require("./top-list-option.cjs");;/* empty css               */const M=["value"],P=_.CHART_SERIES_COLOR_TOKENS[0];function A(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function j(t,a){const u=new Set(t.map(e=>e.id)),o=a.filter(e=>u.has(e)),d=t.map(e=>e.id).filter(e=>!o.includes(e));return[...o,...d]}function y({items:t,sort:a="desc",total:u,valueDisplay:o=M,valueFormatter:d,colorToken:e=P,className:C,...L}){const{containerRef:f,chart:p,theme:l,resolveSeriesColor:h}=q.useChartInstance(),R=c.useRef(!1),v=c.useRef([]),[O,T]=c.useState(0),[S,m]=c.useState(0);c.useEffect(()=>{const s=f.current;if(!s)return;const r=new ResizeObserver(()=>{T(s.clientHeight),m(s.clientWidth)});return r.observe(s),()=>r.disconnect()},[f]);const E=O>0,I=x.labeledRowStepFor(O,t.length),b=c.useMemo(()=>{const s=h(e),r=[];return t.forEach(i=>{const n=(i.colorToken?h(i.colorToken):void 0)??s;n&&r.push([i.id,n])}),Object.fromEntries(r)},[t,e,l,h]);return c.useEffect(()=>{if(!p||!l||!E)return;const s=R.current&&!A();v.current=j(t,v.current);const r=new Map(t.map(n=>[n.id,n])),i=v.current.map(n=>r.get(n));p.setOption(x.buildTopListOption({items:i,sort:a,total:u,valueDisplay:o,theme:l,colorsByItemId:b,animate:s,labeledRowStep:I,canvasWidthPx:S,valueFormatter:d}),{replaceMerge:["series","yAxis"]}),R.current=!0},[p,l,t,a,u,o,b,E,I,S,d]),g.jsx("div",{className:w.clsx("top-list",C),...L,children:g.jsx("div",{ref:f,className:"top-list__canvas"})})}exports.TopList=y;
 //# sourceMappingURL=TopList.cjs.map

package/dist/lib/ui/components/charts/TopList/TopList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TopList.cjs","sources":["../../../../../../src/ui/components/charts/TopList/TopList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CHART_SERIES_COLOR_TOKENS } from \"../chart-palette\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n  buildTopListOption,\n  labeledRowStepFor,\n  type TopListItem,\n  type TopListSort,\n  type TopListValueDisplay,\n} from \"./top-list-option\";\nimport \"./top-list.css\";\n\nexport type { TopListItem, TopListSort, TopListValueDisplay } from \"./top-list-option\";\n\nexport type TopListProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  items: TopListItem[];\n  sort?: TopListSort;\n  total?: number;\n  valueDisplay?: TopListValueDisplay[];\n  valueFormatter?: (value: number) => string;\n  colorToken?: string;\n};\n\nconst DEFAULT_VALUE_DISPLAY: TopListValueDisplay[] = [\"value\"];\n\nconst DEFAULT_COLOR_TOKEN: string = CHART_SERIES_COLOR_TOKENS[0];\n\nfunction prefersReducedMotion(): boolean {\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nfunction keepFirstSeenOrder(items: TopListItem[], previousOrder: string[]): string[] {\n  const currentIds: Set<string> = new Set(items.map((item: TopListItem) => item.id));\n  const survivingIds: string[] = previousOrder.filter((id: string) => currentIds.has(id));\n  const newIds: string[] = items\n    .map((item: TopListItem) => item.id)\n    .filter((id: string) => !survivingIds.includes(id));\n  return [...survivingIds, ...newIds];\n}\n\nexport function TopList({\n  items,\n  sort = \"desc\",\n  total,\n  valueDisplay = DEFAULT_VALUE_DISPLAY,\n  valueFormatter,\n  colorToken = DEFAULT_COLOR_TOKEN,\n  className,\n  ...props\n}: TopListProps) {\n  const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n  const hasDrawnRef = useRef<boolean>(false);\n  const categoryOrderRef = useRef<string[]>([]);\n  const [canvasHeightPx, setCanvasHeightPx] = useState<number>(0);\n\n  useEffect(() => {\n    const canvas: HTMLDivElement | null = containerRef.current;\n    if (!canvas) return undefined;\n    const observer: ResizeObserver = new ResizeObserver(() => setCanvasHeightPx(canvas.clientHeight));\n    observer.observe(canvas);\n    return () => observer.disconnect();\n  }, [containerRef]);\n\n  const isCanvasMeasured: boolean = canvasHeightPx > 0;\n  const labeledRowStep: number = labeledRowStepFor(canvasHeightPx, items.length);\n\n  const colorsByItemId: Record<string, string> = useMemo(() => {\n    const defaultColor: string | undefined = resolveSeriesColor(colorToken);\n    const entries: Array<[string, string]> = [];\n    items.forEach((item: TopListItem) => {\n      const color: string | undefined =\n        (item.colorToken ? resolveSeriesColor(item.colorToken) : undefined) ?? defaultColor;\n      if (color) entries.push([item.id, color]);\n    });\n    return Object.fromEntries(entries);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [items, colorToken, theme, resolveSeriesColor]);\n\n  useEffect(() => {\n    if (!chart || !theme || !isCanvasMeasured) return;\n    const animate: boolean = hasDrawnRef.current && !prefersReducedMotion();\n    categoryOrderRef.current = keepFirstSeenOrder(items, categoryOrderRef.current);\n    const itemsById: Map<string, TopListItem> = new Map(\n      items.map((item: TopListItem) => [item.id, item]),\n    );\n    const stableItems: TopListItem[] = categoryOrderRef.current.map(\n      (id: string) => itemsById.get(id) as TopListItem,\n    );\n    chart.setOption(\n      buildTopListOption({\n        items: stableItems,\n        sort,\n        total,\n        valueDisplay,\n        theme,\n        colorsByItemId,\n        animate,\n        labeledRowStep,\n        valueFormatter,\n      }),\n      { replaceMerge: [\"series\", \"yAxis\"] },\n    );\n    hasDrawnRef.current = true;\n  }, [\n    chart,\n    theme,\n    items,\n    sort,\n    total,\n    valueDisplay,\n    colorsByItemId,\n    isCanvasMeasured,\n    labeledRowStep,\n    valueFormatter,\n  ]);\n\n  return (\n    <div className={clsx(\"top-list\", className)} {...props}>\n      <div ref={containerRef} className=\"top-list__canvas\" />\n    </div>\n  );\n}\n"],"names":["DEFAULT_VALUE_DISPLAY","DEFAULT_COLOR_TOKEN","CHART_SERIES_COLOR_TOKENS","prefersReducedMotion","keepFirstSeenOrder","items","previousOrder","currentIds","item","survivingIds","id","newIds","TopList","sort","total","valueDisplay","valueFormatter","colorToken","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","hasDrawnRef","useRef","categoryOrderRef","canvasHeightPx","setCanvasHeightPx","useState","useEffect","canvas","observer","isCanvasMeasured","labeledRowStep","labeledRowStepFor","colorsByItemId","useMemo","defaultColor","entries","color","animate","itemsById","stableItems","buildTopListOption","jsx","clsx"],"mappings":"mUAwBA,MAAMA,EAA+C,CAAC,OAAO,EAEvDC,EAA8BC,EAAAA,0BAA0B,CAAC,EAE/D,SAASC,GAAgC,CACvC,OAAO,OAAO,WAAW,kCAAkC,EAAE,OAC/D,CAEA,SAASC,EAAmBC,EAAsBC,EAAmC,CACnF,MAAMC,EAA0B,IAAI,IAAIF,EAAM,IAAKG,GAAsBA,EAAK,EAAE,CAAC,EAC3EC,EAAyBH,EAAc,OAAQI,GAAeH,EAAW,IAAIG,CAAE,CAAC,EAChFC,EAAmBN,EACtB,IAAKG,GAAsBA,EAAK,EAAE,EAClC,OAAQE,GAAe,CAACD,EAAa,SAASC,CAAE,CAAC,EACpD,MAAO,CAAC,GAAGD,EAAc,GAAGE,CAAM,CACpC,CAEO,SAASC,EAAQ,CACtB,MAAAP,EACA,KAAAQ,EAAO,OACP,MAAAC,EACA,aAAAC,EAAef,EACf,eAAAgB,EACA,WAAAC,EAAahB,EACb,UAAAiB,EACA,GAAGC,CACL,EAAiB,CACf,KAAM,CAAE,aAAAC,EAAc,MAAAC,EAAO,MAAAC,EAAO,mBAAAC,CAAA,EAAsCC,EAAAA,iBAAA,EACpEC,EAAcC,EAAAA,OAAgB,EAAK,EACnCC,EAAmBD,EAAAA,OAAiB,EAAE,EACtC,CAACE,EAAgBC,CAAiB,EAAIC,EAAAA,SAAiB,CAAC,EAE9DC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAgCZ,EAAa,QACnD,GAAI,CAACY,EAAQ,OACb,MAAMC,EAA2B,IAAI,eAAe,IAAMJ,EAAkBG,EAAO,YAAY,CAAC,EAChG,OAAAC,EAAS,QAAQD,CAAM,EAChB,IAAMC,EAAS,WAAA,CACxB,EAAG,CAACb,CAAY,CAAC,EAEjB,MAAMc,EAA4BN,EAAiB,EAC7CO,EAAyBC,EAAAA,kBAAkBR,EAAgBvB,EAAM,MAAM,EAEvEgC,EAAyCC,EAAAA,QAAQ,IAAM,CAC3D,MAAMC,EAAmChB,EAAmBN,CAAU,EAChEuB,EAAmC,CAAA,EACzC,OAAAnC,EAAM,QAASG,GAAsB,CACnC,MAAMiC,GACHjC,EAAK,WAAae,EAAmBf,EAAK,UAAU,EAAI,SAAc+B,EACrEE,GAAOD,EAAQ,KAAK,CAAChC,EAAK,GAAIiC,CAAK,CAAC,CAC1C,CAAC,EACM,OAAO,YAAYD,CAAO,CAEnC,EAAG,CAACnC,EAAOY,EAAYK,EAAOC,CAAkB,CAAC,EAEjDQ,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACV,GAAS,CAACC,GAAS,CAACY,EAAkB,OAC3C,MAAMQ,EAAmBjB,EAAY,SAAW,CAACtB,EAAA,EACjDwB,EAAiB,QAAUvB,EAAmBC,EAAOsB,EAAiB,OAAO,EAC7E,MAAMgB,EAAsC,IAAI,IAC9CtC,EAAM,IAAKG,GAAsB,CAACA,EAAK,GAAIA,CAAI,CAAC,CAAA,EAE5CoC,EAA6BjB,EAAiB,QAAQ,IACzDjB,GAAeiC,EAAU,IAAIjC,CAAE,CAAA,EAElCW,EAAM,UACJwB,qBAAmB,CACjB,MAAOD,EACP,KAAA/B,EACA,MAAAC,EACA,aAAAC,EACA,MAAAO,EACA,eAAAe,EACA,QAAAK,EACA,eAAAP,EACA,eAAAnB,CAAA,CACD,EACD,CAAE,aAAc,CAAC,SAAU,OAAO,CAAA,CAAE,EAEtCS,EAAY,QAAU,EACxB,EAAG,CACDJ,EACAC,EACAjB,EACAQ,EACAC,EACAC,EACAsB,EACAH,EACAC,EACAnB,CAAA,CACD,EAGC8B,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,KAAK,WAAY7B,CAAS,EAAI,GAAGC,EAC/C,eAAC,MAAA,CAAI,IAAKC,EAAc,UAAU,mBAAmB,EACvD,CAEJ"}
+{"version":3,"file":"TopList.cjs","sources":["../../../../../../src/ui/components/charts/TopList/TopList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CHART_SERIES_COLOR_TOKENS } from \"../chart-palette\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n  buildTopListOption,\n  labeledRowStepFor,\n  type TopListItem,\n  type TopListSort,\n  type TopListValueDisplay,\n} from \"./top-list-option\";\nimport \"./top-list.css\";\n\nexport type { TopListItem, TopListSort, TopListValueDisplay } from \"./top-list-option\";\n\nexport type TopListProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  items: TopListItem[];\n  sort?: TopListSort;\n  total?: number;\n  valueDisplay?: TopListValueDisplay[];\n  valueFormatter?: (value: number) => string;\n  colorToken?: string;\n};\n\nconst DEFAULT_VALUE_DISPLAY: TopListValueDisplay[] = [\"value\"];\n\nconst DEFAULT_COLOR_TOKEN: string = CHART_SERIES_COLOR_TOKENS[0];\n\nfunction prefersReducedMotion(): boolean {\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nfunction keepFirstSeenOrder(items: TopListItem[], previousOrder: string[]): string[] {\n  const currentIds: Set<string> = new Set(items.map((item: TopListItem) => item.id));\n  const survivingIds: string[] = previousOrder.filter((id: string) => currentIds.has(id));\n  const newIds: string[] = items\n    .map((item: TopListItem) => item.id)\n    .filter((id: string) => !survivingIds.includes(id));\n  return [...survivingIds, ...newIds];\n}\n\nexport function TopList({\n  items,\n  sort = \"desc\",\n  total,\n  valueDisplay = DEFAULT_VALUE_DISPLAY,\n  valueFormatter,\n  colorToken = DEFAULT_COLOR_TOKEN,\n  className,\n  ...props\n}: TopListProps) {\n  const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n  const hasDrawnRef = useRef<boolean>(false);\n  const categoryOrderRef = useRef<string[]>([]);\n  const [canvasHeightPx, setCanvasHeightPx] = useState<number>(0);\n  const [canvasWidthPx, setCanvasWidthPx] = useState<number>(0);\n\n  useEffect(() => {\n    const canvas: HTMLDivElement | null = containerRef.current;\n    if (!canvas) return undefined;\n    const observer: ResizeObserver = new ResizeObserver(() => {\n      setCanvasHeightPx(canvas.clientHeight);\n      setCanvasWidthPx(canvas.clientWidth);\n    });\n    observer.observe(canvas);\n    return () => observer.disconnect();\n  }, [containerRef]);\n\n  const isCanvasMeasured: boolean = canvasHeightPx > 0;\n  const labeledRowStep: number = labeledRowStepFor(canvasHeightPx, items.length);\n\n  const colorsByItemId: Record<string, string> = useMemo(() => {\n    const defaultColor: string | undefined = resolveSeriesColor(colorToken);\n    const entries: Array<[string, string]> = [];\n    items.forEach((item: TopListItem) => {\n      const color: string | undefined =\n        (item.colorToken ? resolveSeriesColor(item.colorToken) : undefined) ?? defaultColor;\n      if (color) entries.push([item.id, color]);\n    });\n    return Object.fromEntries(entries);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [items, colorToken, theme, resolveSeriesColor]);\n\n  useEffect(() => {\n    if (!chart || !theme || !isCanvasMeasured) return;\n    const animate: boolean = hasDrawnRef.current && !prefersReducedMotion();\n    categoryOrderRef.current = keepFirstSeenOrder(items, categoryOrderRef.current);\n    const itemsById: Map<string, TopListItem> = new Map(\n      items.map((item: TopListItem) => [item.id, item]),\n    );\n    const stableItems: TopListItem[] = categoryOrderRef.current.map(\n      (id: string) => itemsById.get(id) as TopListItem,\n    );\n    chart.setOption(\n      buildTopListOption({\n        items: stableItems,\n        sort,\n        total,\n        valueDisplay,\n        theme,\n        colorsByItemId,\n        animate,\n        labeledRowStep,\n        canvasWidthPx,\n        valueFormatter,\n      }),\n      { replaceMerge: [\"series\", \"yAxis\"] },\n    );\n    hasDrawnRef.current = true;\n  }, [\n    chart,\n    theme,\n    items,\n    sort,\n    total,\n    valueDisplay,\n    colorsByItemId,\n    isCanvasMeasured,\n    labeledRowStep,\n    canvasWidthPx,\n    valueFormatter,\n  ]);\n\n  return (\n    <div className={clsx(\"top-list\", className)} {...props}>\n      <div ref={containerRef} className=\"top-list__canvas\" />\n    </div>\n  );\n}\n"],"names":["DEFAULT_VALUE_DISPLAY","DEFAULT_COLOR_TOKEN","CHART_SERIES_COLOR_TOKENS","prefersReducedMotion","keepFirstSeenOrder","items","previousOrder","currentIds","item","survivingIds","id","newIds","TopList","sort","total","valueDisplay","valueFormatter","colorToken","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","hasDrawnRef","useRef","categoryOrderRef","canvasHeightPx","setCanvasHeightPx","useState","canvasWidthPx","setCanvasWidthPx","useEffect","canvas","observer","isCanvasMeasured","labeledRowStep","labeledRowStepFor","colorsByItemId","useMemo","defaultColor","entries","color","animate","itemsById","stableItems","buildTopListOption","jsx","clsx"],"mappings":"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"}

package/dist/lib/ui/components/charts/TopList/TopList.js

@@ -1,61 +1,64 @@
-import { jsx as I } from "react/jsx-runtime";
-import { clsx as C } from "../../../../vendor/clsx/dist/clsx.js";
-import { useRef as S, useState as L, useEffect as w, useMemo as T } from "react";
-import { CHART_SERIES_COLOR_TOKENS as x } from "../chart-palette.js";
-import { useChartInstance as A } from "../useChartInstance.js";
-import { labeledRowStepFor as M, buildTopListOption as H } from "./top-list-option.js";
+import { jsx as S } from "react/jsx-runtime";
+import { clsx as T } from "../../../../vendor/clsx/dist/clsx.js";
+import { useRef as w, useState as C, useEffect as _, useMemo as A } from "react";
+import { CHART_SERIES_COLOR_TOKENS as M } from "../chart-palette.js";
+import { useChartInstance as P } from "../useChartInstance.js";
+import { labeledRowStepFor as H, buildTopListOption as N } from "./top-list-option.js";
 /* empty css             */
-const N = ["value"], y = x[0];
-function D() {
+const y = ["value"], D = M[0];
+function F() {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function F(r, i) {
-  const a = new Set(r.map((e) => e.id)), s = i.filter((e) => a.has(e)), d = r.map((e) => e.id).filter((e) => !s.includes(e));
-  return [...s, ...d];
+function U(t, i) {
+  const a = new Set(t.map((e) => e.id)), o = i.filter((e) => a.has(e)), d = t.map((e) => e.id).filter((e) => !o.includes(e));
+  return [...o, ...d];
 }
-function V({
-  items: r,
+function Y({
+  items: t,
   sort: i = "desc",
   total: a,
-  valueDisplay: s = N,
+  valueDisplay: o = y,
   valueFormatter: d,
-  colorToken: e = y,
-  className: _,
-  ...b
+  colorToken: e = D,
+  className: b,
+  ...g
 }) {
-  const { containerRef: f, chart: p, theme: u, resolveSeriesColor: l } = A(), h = S(!1), m = S([]), [v, g] = L(0);
-  w(() => {
-    const t = f.current;
-    if (!t) return;
-    const n = new ResizeObserver(() => g(t.clientHeight));
-    return n.observe(t), () => n.disconnect();
+  const { containerRef: f, chart: p, theme: u, resolveSeriesColor: l } = P(), h = w(!1), m = w([]), [v, x] = C(0), [O, L] = C(0);
+  _(() => {
+    const r = f.current;
+    if (!r) return;
+    const n = new ResizeObserver(() => {
+      x(r.clientHeight), L(r.clientWidth);
+    });
+    return n.observe(r), () => n.disconnect();
   }, [f]);
-  const O = v > 0, R = M(v, r.length), E = T(() => {
-    const t = l(e), n = [];
-    return r.forEach((c) => {
-      const o = (c.colorToken ? l(c.colorToken) : void 0) ?? t;
-      o && n.push([c.id, o]);
+  const R = v > 0, E = H(v, t.length), I = A(() => {
+    const r = l(e), n = [];
+    return t.forEach((c) => {
+      const s = (c.colorToken ? l(c.colorToken) : void 0) ?? r;
+      s && n.push([c.id, s]);
     }), Object.fromEntries(n);
-  }, [r, e, u, l]);
-  return w(() => {
-    if (!p || !u || !O) return;
-    const t = h.current && !D();
-    m.current = F(r, m.current);
+  }, [t, e, u, l]);
+  return _(() => {
+    if (!p || !u || !R) return;
+    const r = h.current && !F();
+    m.current = U(t, m.current);
     const n = new Map(
-      r.map((o) => [o.id, o])
+      t.map((s) => [s.id, s])
     ), c = m.current.map(
-      (o) => n.get(o)
+      (s) => n.get(s)
     );
     p.setOption(
-      H({
+      N({
         items: c,
         sort: i,
         total: a,
-        valueDisplay: s,
+        valueDisplay: o,
         theme: u,
-        colorsByItemId: E,
-        animate: t,
-        labeledRowStep: R,
+        colorsByItemId: I,
+        animate: r,
+        labeledRowStep: E,
+        canvasWidthPx: O,
         valueFormatter: d
       }),
       { replaceMerge: ["series", "yAxis"] }
@@ -63,17 +66,18 @@ function V({
   }, [
     p,
     u,
-    r,
+    t,
     i,
     a,
-    s,
+    o,
+    I,
+    R,
     E,
     O,
-    R,
     d
-  ]), /* @__PURE__ */ I("div", { className: C("top-list", _), ...b, children: /* @__PURE__ */ I("div", { ref: f, className: "top-list__canvas" }) });
+  ]), /* @__PURE__ */ S("div", { className: T("top-list", b), ...g, children: /* @__PURE__ */ S("div", { ref: f, className: "top-list__canvas" }) });
 }
 export {
-  V as TopList
+  Y as TopList
 };
 //# sourceMappingURL=TopList.js.map

package/dist/lib/ui/components/charts/TopList/TopList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopList.js","sources":["../../../../../../src/ui/components/charts/TopList/TopList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CHART_SERIES_COLOR_TOKENS } from \"../chart-palette\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n  buildTopListOption,\n  labeledRowStepFor,\n  type TopListItem,\n  type TopListSort,\n  type TopListValueDisplay,\n} from \"./top-list-option\";\nimport \"./top-list.css\";\n\nexport type { TopListItem, TopListSort, TopListValueDisplay } from \"./top-list-option\";\n\nexport type TopListProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  items: TopListItem[];\n  sort?: TopListSort;\n  total?: number;\n  valueDisplay?: TopListValueDisplay[];\n  valueFormatter?: (value: number) => string;\n  colorToken?: string;\n};\n\nconst DEFAULT_VALUE_DISPLAY: TopListValueDisplay[] = [\"value\"];\n\nconst DEFAULT_COLOR_TOKEN: string = CHART_SERIES_COLOR_TOKENS[0];\n\nfunction prefersReducedMotion(): boolean {\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nfunction keepFirstSeenOrder(items: TopListItem[], previousOrder: string[]): string[] {\n  const currentIds: Set<string> = new Set(items.map((item: TopListItem) => item.id));\n  const survivingIds: string[] = previousOrder.filter((id: string) => currentIds.has(id));\n  const newIds: string[] = items\n    .map((item: TopListItem) => item.id)\n    .filter((id: string) => !survivingIds.includes(id));\n  return [...survivingIds, ...newIds];\n}\n\nexport function TopList({\n  items,\n  sort = \"desc\",\n  total,\n  valueDisplay = DEFAULT_VALUE_DISPLAY,\n  valueFormatter,\n  colorToken = DEFAULT_COLOR_TOKEN,\n  className,\n  ...props\n}: TopListProps) {\n  const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n  const hasDrawnRef = useRef<boolean>(false);\n  const categoryOrderRef = useRef<string[]>([]);\n  const [canvasHeightPx, setCanvasHeightPx] = useState<number>(0);\n\n  useEffect(() => {\n    const canvas: HTMLDivElement | null = containerRef.current;\n    if (!canvas) return undefined;\n    const observer: ResizeObserver = new ResizeObserver(() => setCanvasHeightPx(canvas.clientHeight));\n    observer.observe(canvas);\n    return () => observer.disconnect();\n  }, [containerRef]);\n\n  const isCanvasMeasured: boolean = canvasHeightPx > 0;\n  const labeledRowStep: number = labeledRowStepFor(canvasHeightPx, items.length);\n\n  const colorsByItemId: Record<string, string> = useMemo(() => {\n    const defaultColor: string | undefined = resolveSeriesColor(colorToken);\n    const entries: Array<[string, string]> = [];\n    items.forEach((item: TopListItem) => {\n      const color: string | undefined =\n        (item.colorToken ? resolveSeriesColor(item.colorToken) : undefined) ?? defaultColor;\n      if (color) entries.push([item.id, color]);\n    });\n    return Object.fromEntries(entries);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [items, colorToken, theme, resolveSeriesColor]);\n\n  useEffect(() => {\n    if (!chart || !theme || !isCanvasMeasured) return;\n    const animate: boolean = hasDrawnRef.current && !prefersReducedMotion();\n    categoryOrderRef.current = keepFirstSeenOrder(items, categoryOrderRef.current);\n    const itemsById: Map<string, TopListItem> = new Map(\n      items.map((item: TopListItem) => [item.id, item]),\n    );\n    const stableItems: TopListItem[] = categoryOrderRef.current.map(\n      (id: string) => itemsById.get(id) as TopListItem,\n    );\n    chart.setOption(\n      buildTopListOption({\n        items: stableItems,\n        sort,\n        total,\n        valueDisplay,\n        theme,\n        colorsByItemId,\n        animate,\n        labeledRowStep,\n        valueFormatter,\n      }),\n      { replaceMerge: [\"series\", \"yAxis\"] },\n    );\n    hasDrawnRef.current = true;\n  }, [\n    chart,\n    theme,\n    items,\n    sort,\n    total,\n    valueDisplay,\n    colorsByItemId,\n    isCanvasMeasured,\n    labeledRowStep,\n    valueFormatter,\n  ]);\n\n  return (\n    <div className={clsx(\"top-list\", className)} {...props}>\n      <div ref={containerRef} className=\"top-list__canvas\" />\n    </div>\n  );\n}\n"],"names":["DEFAULT_VALUE_DISPLAY","DEFAULT_COLOR_TOKEN","CHART_SERIES_COLOR_TOKENS","prefersReducedMotion","keepFirstSeenOrder","items","previousOrder","currentIds","item","survivingIds","id","newIds","TopList","sort","total","valueDisplay","valueFormatter","colorToken","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","hasDrawnRef","useRef","categoryOrderRef","canvasHeightPx","setCanvasHeightPx","useState","useEffect","canvas","observer","isCanvasMeasured","labeledRowStep","labeledRowStepFor","colorsByItemId","useMemo","defaultColor","entries","color","animate","itemsById","stableItems","buildTopListOption","jsx","clsx"],"mappings":"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"}
+{"version":3,"file":"TopList.js","sources":["../../../../../../src/ui/components/charts/TopList/TopList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CHART_SERIES_COLOR_TOKENS } from \"../chart-palette\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n  buildTopListOption,\n  labeledRowStepFor,\n  type TopListItem,\n  type TopListSort,\n  type TopListValueDisplay,\n} from \"./top-list-option\";\nimport \"./top-list.css\";\n\nexport type { TopListItem, TopListSort, TopListValueDisplay } from \"./top-list-option\";\n\nexport type TopListProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  items: TopListItem[];\n  sort?: TopListSort;\n  total?: number;\n  valueDisplay?: TopListValueDisplay[];\n  valueFormatter?: (value: number) => string;\n  colorToken?: string;\n};\n\nconst DEFAULT_VALUE_DISPLAY: TopListValueDisplay[] = [\"value\"];\n\nconst DEFAULT_COLOR_TOKEN: string = CHART_SERIES_COLOR_TOKENS[0];\n\nfunction prefersReducedMotion(): boolean {\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nfunction keepFirstSeenOrder(items: TopListItem[], previousOrder: string[]): string[] {\n  const currentIds: Set<string> = new Set(items.map((item: TopListItem) => item.id));\n  const survivingIds: string[] = previousOrder.filter((id: string) => currentIds.has(id));\n  const newIds: string[] = items\n    .map((item: TopListItem) => item.id)\n    .filter((id: string) => !survivingIds.includes(id));\n  return [...survivingIds, ...newIds];\n}\n\nexport function TopList({\n  items,\n  sort = \"desc\",\n  total,\n  valueDisplay = DEFAULT_VALUE_DISPLAY,\n  valueFormatter,\n  colorToken = DEFAULT_COLOR_TOKEN,\n  className,\n  ...props\n}: TopListProps) {\n  const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n  const hasDrawnRef = useRef<boolean>(false);\n  const categoryOrderRef = useRef<string[]>([]);\n  const [canvasHeightPx, setCanvasHeightPx] = useState<number>(0);\n  const [canvasWidthPx, setCanvasWidthPx] = useState<number>(0);\n\n  useEffect(() => {\n    const canvas: HTMLDivElement | null = containerRef.current;\n    if (!canvas) return undefined;\n    const observer: ResizeObserver = new ResizeObserver(() => {\n      setCanvasHeightPx(canvas.clientHeight);\n      setCanvasWidthPx(canvas.clientWidth);\n    });\n    observer.observe(canvas);\n    return () => observer.disconnect();\n  }, [containerRef]);\n\n  const isCanvasMeasured: boolean = canvasHeightPx > 0;\n  const labeledRowStep: number = labeledRowStepFor(canvasHeightPx, items.length);\n\n  const colorsByItemId: Record<string, string> = useMemo(() => {\n    const defaultColor: string | undefined = resolveSeriesColor(colorToken);\n    const entries: Array<[string, string]> = [];\n    items.forEach((item: TopListItem) => {\n      const color: string | undefined =\n        (item.colorToken ? resolveSeriesColor(item.colorToken) : undefined) ?? defaultColor;\n      if (color) entries.push([item.id, color]);\n    });\n    return Object.fromEntries(entries);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [items, colorToken, theme, resolveSeriesColor]);\n\n  useEffect(() => {\n    if (!chart || !theme || !isCanvasMeasured) return;\n    const animate: boolean = hasDrawnRef.current && !prefersReducedMotion();\n    categoryOrderRef.current = keepFirstSeenOrder(items, categoryOrderRef.current);\n    const itemsById: Map<string, TopListItem> = new Map(\n      items.map((item: TopListItem) => [item.id, item]),\n    );\n    const stableItems: TopListItem[] = categoryOrderRef.current.map(\n      (id: string) => itemsById.get(id) as TopListItem,\n    );\n    chart.setOption(\n      buildTopListOption({\n        items: stableItems,\n        sort,\n        total,\n        valueDisplay,\n        theme,\n        colorsByItemId,\n        animate,\n        labeledRowStep,\n        canvasWidthPx,\n        valueFormatter,\n      }),\n      { replaceMerge: [\"series\", \"yAxis\"] },\n    );\n    hasDrawnRef.current = true;\n  }, [\n    chart,\n    theme,\n    items,\n    sort,\n    total,\n    valueDisplay,\n    colorsByItemId,\n    isCanvasMeasured,\n    labeledRowStep,\n    canvasWidthPx,\n    valueFormatter,\n  ]);\n\n  return (\n    <div className={clsx(\"top-list\", className)} {...props}>\n      <div ref={containerRef} className=\"top-list__canvas\" />\n    </div>\n  );\n}\n"],"names":["DEFAULT_VALUE_DISPLAY","DEFAULT_COLOR_TOKEN","CHART_SERIES_COLOR_TOKENS","prefersReducedMotion","keepFirstSeenOrder","items","previousOrder","currentIds","item","survivingIds","id","newIds","TopList","sort","total","valueDisplay","valueFormatter","colorToken","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","hasDrawnRef","useRef","categoryOrderRef","canvasHeightPx","setCanvasHeightPx","useState","canvasWidthPx","setCanvasWidthPx","useEffect","canvas","observer","isCanvasMeasured","labeledRowStep","labeledRowStepFor","colorsByItemId","useMemo","defaultColor","entries","color","animate","itemsById","stableItems","buildTopListOption","jsx","clsx"],"mappings":";;;;;;;AAwBA,MAAMA,IAA+C,CAAC,OAAO,GAEvDC,IAA8BC,EAA0B,CAAC;AAE/D,SAASC,IAAgC;AACvC,SAAO,OAAO,WAAW,kCAAkC,EAAE;AAC/D;AAEA,SAASC,EAAmBC,GAAsBC,GAAmC;AACnF,QAAMC,IAA0B,IAAI,IAAIF,EAAM,IAAI,CAACG,MAAsBA,EAAK,EAAE,CAAC,GAC3EC,IAAyBH,EAAc,OAAO,CAACI,MAAeH,EAAW,IAAIG,CAAE,CAAC,GAChFC,IAAmBN,EACtB,IAAI,CAACG,MAAsBA,EAAK,EAAE,EAClC,OAAO,CAACE,MAAe,CAACD,EAAa,SAASC,CAAE,CAAC;AACpD,SAAO,CAAC,GAAGD,GAAc,GAAGE,CAAM;AACpC;AAEO,SAASC,EAAQ;AAAA,EACtB,OAAAP;AAAA,EACA,MAAAQ,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,cAAAC,IAAef;AAAA,EACf,gBAAAgB;AAAA,EACA,YAAAC,IAAahB;AAAA,EACb,WAAAiB;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAM,EAAE,cAAAC,GAAc,OAAAC,GAAO,OAAAC,GAAO,oBAAAC,EAAA,IAAsCC,EAAA,GACpEC,IAAcC,EAAgB,EAAK,GACnCC,IAAmBD,EAAiB,EAAE,GACtC,CAACE,GAAgBC,CAAiB,IAAIC,EAAiB,CAAC,GACxD,CAACC,GAAeC,CAAgB,IAAIF,EAAiB,CAAC;AAE5D,EAAAG,EAAU,MAAM;AACd,UAAMC,IAAgCd,EAAa;AACnD,QAAI,CAACc,EAAQ;AACb,UAAMC,IAA2B,IAAI,eAAe,MAAM;AACxD,MAAAN,EAAkBK,EAAO,YAAY,GACrCF,EAAiBE,EAAO,WAAW;AAAA,IACrC,CAAC;AACD,WAAAC,EAAS,QAAQD,CAAM,GAChB,MAAMC,EAAS,WAAA;AAAA,EACxB,GAAG,CAACf,CAAY,CAAC;AAEjB,QAAMgB,IAA4BR,IAAiB,GAC7CS,IAAyBC,EAAkBV,GAAgBvB,EAAM,MAAM,GAEvEkC,IAAyCC,EAAQ,MAAM;AAC3D,UAAMC,IAAmClB,EAAmBN,CAAU,GAChEyB,IAAmC,CAAA;AACzC,WAAArC,EAAM,QAAQ,CAACG,MAAsB;AACnC,YAAMmC,KACHnC,EAAK,aAAae,EAAmBf,EAAK,UAAU,IAAI,WAAciC;AACzE,MAAIE,KAAOD,EAAQ,KAAK,CAAClC,EAAK,IAAImC,CAAK,CAAC;AAAA,IAC1C,CAAC,GACM,OAAO,YAAYD,CAAO;AAAA,EAEnC,GAAG,CAACrC,GAAOY,GAAYK,GAAOC,CAAkB,CAAC;AAEjD,SAAAU,EAAU,MAAM;AACd,QAAI,CAACZ,KAAS,CAACC,KAAS,CAACc,EAAkB;AAC3C,UAAMQ,IAAmBnB,EAAY,WAAW,CAACtB,EAAA;AACjD,IAAAwB,EAAiB,UAAUvB,EAAmBC,GAAOsB,EAAiB,OAAO;AAC7E,UAAMkB,IAAsC,IAAI;AAAA,MAC9CxC,EAAM,IAAI,CAACG,MAAsB,CAACA,EAAK,IAAIA,CAAI,CAAC;AAAA,IAAA,GAE5CsC,IAA6BnB,EAAiB,QAAQ;AAAA,MAC1D,CAACjB,MAAemC,EAAU,IAAInC,CAAE;AAAA,IAAA;AAElC,IAAAW,EAAM;AAAA,MACJ0B,EAAmB;AAAA,QACjB,OAAOD;AAAA,QACP,MAAAjC;AAAA,QACA,OAAAC;AAAA,QACA,cAAAC;AAAA,QACA,OAAAO;AAAA,QACA,gBAAAiB;AAAA,QACA,SAAAK;AAAA,QACA,gBAAAP;AAAA,QACA,eAAAN;AAAA,QACA,gBAAAf;AAAA,MAAA,CACD;AAAA,MACD,EAAE,cAAc,CAAC,UAAU,OAAO,EAAA;AAAA,IAAE,GAEtCS,EAAY,UAAU;AAAA,EACxB,GAAG;AAAA,IACDJ;AAAA,IACAC;AAAA,IACAjB;AAAA,IACAQ;AAAA,IACAC;AAAA,IACAC;AAAA,IACAwB;AAAA,IACAH;AAAA,IACAC;AAAA,IACAN;AAAA,IACAf;AAAA,EAAA,CACD,GAGC,gBAAAgC,EAAC,OAAA,EAAI,WAAWC,EAAK,YAAY/B,CAAS,GAAI,GAAGC,GAC/C,4BAAC,OAAA,EAAI,KAAKC,GAAc,WAAU,oBAAmB,GACvD;AAEJ;"}

package/dist/lib/ui/components/charts/TopList/top-list-option.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../chart-share.cjs");require("echarts/charts");require("echarts/components");const L=require("echarts/core");require("echarts/renderers");function M(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const B=M(L),h="–",b=160,E=12,O=88,w=56,c=16,C=20,p=4,S=8,T=800,f=12,V=14,N=1e-9,X=/[{}|]/g,k="top-list-values";function u(e){return e.value??0}function v(e){const t=Math.max(...e.map(u));return t>0?t:1}function U(e){const t=[...new Set(e.map(u))].sort((o,r)=>o-r),n=t.slice(1).map((o,r)=>o-t[r]);return n.length>0?Math.min(...n):1/0}function F(e){const t=v(e)*N,n=U(e)/(e.length+1);return Math.min(t,n)}function y(e){const t=F(e);return new Map(e.map((n,o)=>[n.id,u(n)+t*(e.length-o)]))}function m(e,t){const n=y(e),o=t==="desc"?-1:1,r=[...e].sort((a,i)=>o*(n.get(a.id)-n.get(i.id)));return new Map(r.map((a,i)=>[a.id,i+1]))}function A(e,t){return t??e.reduce((n,o)=>n+u(o),0)}function x(e,t){return t===0?0:u(e)/t}function g(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function D(e){return e.replace(X," ")}function H(e,t){const n=`${f}px ${t.fontFamily}`;return D(B.format.truncateText(e,b,n,"…"))}function I(e,t){return t===null?h:e.valueFormatter?e.valueFormatter(t):String(t)}function W(e,t){return e.value===null?h:_.formatShare(x(e,t))}function $(e){const t=[];return e.includes("value")&&t.push(O),e.includes("percent")&&t.push(w),t.length===0?0:t.reduce((n,o)=>n+o,0)+S}function j(e,t,n){const o=[];return e.valueDisplay.includes("value")&&o.push(`{value|${D(I(e,t.value))}}`),e.valueDisplay.includes("percent")&&o.push(`{percent|${W(t,n)}}`),o.join("")}function q(e,t){const n=(e-2*c)/t;return Math.max(1,Math.ceil(V/n))}function P(e,t){return e===void 0||(e-1)%t===0}function G(e,t){const{items:n,sort:o,theme:r}=e,a=m(n,o),i=e.labeledRowStep;return{type:"category",data:n.map(l=>l.id),inverse:o==="desc",animationDuration:0,animationDurationUpdate:e.animate?T:0,axisLine:{show:!1},axisTick:{show:!1},axisLabel:{color:r.labelColor,fontSize:f,interval:0,align:"right",margin:E,formatter:l=>{if(!P(a.get(l),i))return"";const d=t.get(l);return d?H(d.name,r):""}}}}function z(e,t,n){return o=>{const r=t.get(o.name);if(!r)return"";const a=r.value===null?"":` · ${_.formatShare(x(r,n))}`,i=g(I(e,r.value));return`<div>${g(r.name)}</div><div><b>${i}</b>${a}</div>`}}function K(e,t,n){const{theme:o}=e,r=m(e.items,e.sort),a=e.labeledRowStep;return{show:e.valueDisplay.length>0,position:"right",distance:S,fontSize:f,formatter:i=>{if(!P(r.get(i.name),a))return"";const l=t.get(i.name);return l?j(e,l,n):""},rich:{value:{color:o.labelColor,fontWeight:600,padding:[0,8,0,0]},percent:{color:o.labelColor}}}}function Y(e){const{items:t,theme:n,colorsByItemId:o}=e,r=new Map(t.map(s=>[s.id,s])),a=A(t,e.total),i=v(t),l=y(t),d=$(e.valueDisplay),R=n.seriesColors[0];return{animation:!0,animationDuration:0,animationDurationUpdate:e.animate?T:0,animationEasing:"linear",animationEasingUpdate:"linear",textStyle:{fontFamily:n.fontFamily,color:n.labelColor},grid:{top:c,bottom:c,left:c+b+E,right:c+d,containLabel:!1},tooltip:{trigger:"item",backgroundColor:n.tooltipBackgroundColor,borderColor:n.tooltipBorderColor,textStyle:{color:n.labelColor},formatter:z(e,r,a)},xAxis:{type:"value",min:0,max:i,show:!1},yAxis:G(e,r),series:[{id:k,type:"bar",realtimeSort:!0,barMaxWidth:C,itemStyle:{borderRadius:[0,p,p,0]},data:t.map(s=>({id:s.id,name:s.id,value:[l.get(s.id),s.id],itemStyle:{color:o[s.id]??R}})),encode:{x:0,y:1},label:K(e,r,a)}]}}exports.buildTopListOption=Y;exports.labeledRowStepFor=q;exports.rankById=m;exports.resolveTotal=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("../chart-share.cjs");require("echarts/charts");require("echarts/components");const C=require("echarts/core");require("echarts/renderers");function L(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const O=L(C),_="–",w=12,M=8,B=88,k=56,u=16,d=4,p=6,c=3,v=800,f=13,V=26,N=1e-9,U=/[{}|]/g,X="top-list-values",W="top-list-tracks";function s(e){return e.value??0}function S(e){const t=Math.max(...e.map(s));return t>0?t:1}function G(e){const t=[...new Set(e.map(s))].sort((n,a)=>n-a),o=t.slice(1).map((n,a)=>n-t[a]);return o.length>0?Math.min(...o):1/0}function F(e){const t=S(e)*N,o=G(e)/(e.length+1);return Math.min(t,o)}function E(e){const t=F(e);return new Map(e.map((o,n)=>[o.id,s(o)+t*(e.length-n)]))}function m(e,t){const o=E(e),n=t==="desc"?-1:1,a=[...e].sort((l,i)=>n*(o.get(l.id)-o.get(i.id)));return new Map(a.map((l,i)=>[l.id,i+1]))}function T(e,t){return t??e.reduce((o,n)=>o+s(n),0)}function y(e,t){return t===0?0:s(e)/t}function g(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function x(e){return e.replace(U," ")}function H(e){const t=[];return e.includes("value")&&t.push(B),e.includes("percent")&&t.push(k),t.reduce((o,n)=>o+n,0)}function $(e){const t=e.canvasWidthPx-2*d-H(e.valueDisplay)-w;return Math.max(t,0)}function j(e,t){const o=`${f}px ${t.theme.fontFamily}`;return x(O.format.truncateText(e,$(t),o,"…"))}function A(e,t){return t===null?_:e.valueFormatter?e.valueFormatter(t):String(t)}function q(e,t){return e.value===null?_:b.formatShare(y(e,t))}function z(e,t,o){const n=[];return e.valueDisplay.includes("value")&&n.push(`{value|${x(A(e,t.value))}}`),e.valueDisplay.includes("percent")&&n.push(`{percent|${q(t,o)}}`),n.join("")}function K(e,t){const o=(e-2*u)/t;return Math.max(1,Math.ceil(V/o))}function D(e,t){return e===void 0||(e-1)%t===0}function Y(e){return{type:"category",data:e.items.map(t=>t.id),inverse:e.sort==="desc",animationDuration:0,animationDurationUpdate:e.animate?v:0,axisLine:{show:!1},axisTick:{show:!1},axisLabel:{show:!1}}}function Z(e,t,o){return n=>{const a=t.get(n.name);if(!a)return"";const l=a.value===null?"":` · ${b.formatShare(y(a,o))}`,i=g(A(e,a.value));return`<div>${g(a.name)}</div><div><b>${i}</b>${l}</div>`}}function I(){return[0,-9]}function J(e,t){const o=m(e.items,e.sort);return{show:!0,position:"insideLeft",distance:0,align:"left",verticalAlign:"bottom",offset:I(),color:e.theme.emphasizedLabelColor,backgroundColor:e.theme.tooltipBackgroundColor,fontSize:f,fontWeight:500,formatter:n=>{if(!D(o.get(n.name),e.labeledRowStep))return"";const a=t.get(n.name);return a?j(a.name,e):""}}}function Q(e,t,o){const{theme:n}=e,a=m(e.items,e.sort);return{show:e.valueDisplay.length>0,backgroundColor:n.tooltipBackgroundColor,position:"insideRight",distance:0,align:"right",verticalAlign:"bottom",offset:I(),fontSize:f,formatter:l=>{if(!D(a.get(l.name),e.labeledRowStep))return"";const i=t.get(l.name);return i?z(e,i,o):""},rich:{value:{color:n.labelColor,fontWeight:600,padding:[0,e.valueDisplay.includes("percent")?M:0,0,0]},percent:{color:n.labelColor}}}}function h(){return[c,c,c,c]}function ee(e){const{items:t,theme:o,colorsByItemId:n}=e,a=new Map(t.map(r=>[r.id,r])),l=T(t,e.total),i=S(t),P=E(t),R=o.seriesColors[0];return{animation:!0,animationDuration:0,animationDurationUpdate:e.animate?v:0,animationEasing:"linear",animationEasingUpdate:"linear",textStyle:{fontFamily:o.fontFamily,color:o.labelColor},grid:{top:u,bottom:u,left:d,right:d,containLabel:!1},tooltip:{trigger:"item",backgroundColor:o.tooltipBackgroundColor,borderColor:o.tooltipBorderColor,textStyle:{color:o.labelColor},formatter:Z(e,a,l)},xAxis:{type:"value",min:0,max:i,show:!1},yAxis:Y(e),series:[{id:W,type:"bar",silent:!0,barWidth:p,barGap:"-100%",itemStyle:{color:o.trackColor,borderRadius:h()},data:t.map(r=>({id:r.id,name:r.id,value:[i,r.id]})),encode:{x:0,y:1},label:Q(e,a,l)},{id:X,type:"bar",realtimeSort:!0,barWidth:p,barGap:"-100%",itemStyle:{borderRadius:h()},data:t.map(r=>({id:r.id,name:r.id,value:[P.get(r.id),r.id],itemStyle:{color:n[r.id]??R}})),encode:{x:0,y:1},label:J(e,a)}]}}exports.buildTopListOption=ee;exports.labeledRowStepFor=K;exports.rankById=m;exports.resolveTotal=T;
 //# sourceMappingURL=top-list-option.cjs.map

package/dist/lib/ui/components/charts/TopList/top-list-option.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"top-list-option.cjs","sources":["../../../../../../src/ui/components/charts/TopList/top-list-option.ts"],"sourcesContent":["import { formatShare } from \"../chart-share\";\nimport { echarts } from \"../echarts-modules\";\nimport type { ChartTheme } from \"../chart-theme\";\n\nexport interface TopListItem {\n  id: string;\n  name: string;\n  value: number | null;\n  colorToken?: string;\n}\n\nexport type TopListSort = \"desc\" | \"asc\";\n\nexport type TopListValueDisplay = \"value\" | \"percent\";\n\nexport interface TopListOptionInput {\n  items: TopListItem[];\n  sort: TopListSort;\n  total?: number;\n  valueDisplay: TopListValueDisplay[];\n  theme: ChartTheme;\n  colorsByItemId: Record<string, string>;\n  animate: boolean;\n  labeledRowStep: number;\n  valueFormatter?: (value: number) => string;\n}\n\nconst EMPTY_VALUE_TEXT: string = \"–\";\n\nconst NAME_MAX_WIDTH_PX: number = 160;\n\nconst NAME_TO_BAR_GAP_PX: number = 12;\n\nconst VALUE_COLUMN_WIDTH_PX: number = 88;\n\nconst PERCENT_COLUMN_WIDTH_PX: number = 56;\n\nconst GRID_PADDING_PX: number = 16;\n\nconst BAR_MAX_WIDTH_PX: number = 20;\n\nconst BAR_RADIUS_PX: number = 4;\n\nconst BAR_END_LABEL_DISTANCE_PX: number = 8;\n\nconst UPDATE_ANIMATION_MS: number = 800;\n\nconst LABEL_FONT_SIZE_PX: number = 12;\n\nconst MIN_LABELED_ROW_HEIGHT_PX: number = 14;\n\nconst TIE_BREAK_RELATIVE_STEP: number = 1e-9;\n\nconst RICH_TEXT_RESERVED: RegExp = /[{}|]/g;\n\nconst VALUE_SERIES_ID: string = \"top-list-values\";\n\n\nfunction valueOf(item: TopListItem): number {\n  return item.value ?? 0;\n}\n\nfunction maxValueOf(items: TopListItem[]): number {\n  const maxValue: number = Math.max(...items.map(valueOf));\n  return maxValue > 0 ? maxValue : 1;\n}\n\nfunction smallestGapBetweenDistinctValues(items: TopListItem[]): number {\n  const distinctValues: number[] = [...new Set(items.map(valueOf))].sort(\n    (first: number, second: number) => first - second,\n  );\n  const gaps: number[] = distinctValues\n    .slice(1)\n    .map((value: number, index: number) => value - distinctValues[index]);\n  return gaps.length > 0 ? Math.min(...gaps) : Infinity;\n}\n\nfunction tieBreakStepOf(items: TopListItem[]): number {\n  const relativeStep: number = maxValueOf(items) * TIE_BREAK_RELATIVE_STEP;\n  const stepThatKeepsDistinctValuesApart: number =\n    smallestGapBetweenDistinctValues(items) / (items.length + 1);\n  return Math.min(relativeStep, stepThatKeepsDistinctValuesApart);\n}\n\nfunction plottedValuesById(items: TopListItem[]): Map<string, number> {\n  const tieBreakStep: number = tieBreakStepOf(items);\n  return new Map(\n    items.map((item: TopListItem, position: number) => [\n      item.id,\n      valueOf(item) + tieBreakStep * (items.length - position),\n    ]),\n  );\n}\n\nexport function rankById(items: TopListItem[], sort: TopListSort): Map<string, number> {\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const direction: number = sort === \"desc\" ? -1 : 1;\n  const ranked: TopListItem[] = [...items].sort(\n    (first: TopListItem, second: TopListItem) =>\n      direction * ((plottedValues.get(first.id) as number) - (plottedValues.get(second.id) as number)),\n  );\n  return new Map(ranked.map((item: TopListItem, index: number) => [item.id, index + 1]));\n}\n\nexport function resolveTotal(items: TopListItem[], total?: number): number {\n  return total ?? items.reduce((sum: number, item: TopListItem) => sum + valueOf(item), 0);\n}\n\nfunction shareOf(item: TopListItem, total: number): number {\n  return total === 0 ? 0 : valueOf(item) / total;\n}\n\nfunction escapeHtml(text: string): string {\n  return text.replace(/&/g, \"&amp;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\");\n}\n\nfunction plainRichText(text: string): string {\n  return text.replace(RICH_TEXT_RESERVED, \" \");\n}\n\nfunction truncatedName(name: string, theme: ChartTheme): string {\n  const font: string = `${LABEL_FONT_SIZE_PX}px ${theme.fontFamily}`;\n  return plainRichText(echarts.format.truncateText(name, NAME_MAX_WIDTH_PX, font, \"…\"));\n}\n\nfunction formatValueText(input: TopListOptionInput, value: number | null): string {\n  if (value === null) return EMPTY_VALUE_TEXT;\n  return input.valueFormatter ? input.valueFormatter(value) : String(value);\n}\n\nfunction formatShareText(item: TopListItem, total: number): string {\n  return item.value === null ? EMPTY_VALUE_TEXT : formatShare(shareOf(item, total));\n}\n\nfunction barEndLabelWidthPx(valueDisplay: TopListValueDisplay[]): number {\n  const widths: number[] = [];\n  if (valueDisplay.includes(\"value\")) widths.push(VALUE_COLUMN_WIDTH_PX);\n  if (valueDisplay.includes(\"percent\")) widths.push(PERCENT_COLUMN_WIDTH_PX);\n  if (widths.length === 0) return 0;\n  return widths.reduce((sum: number, width: number) => sum + width, 0) + BAR_END_LABEL_DISTANCE_PX;\n}\n\nfunction barEndLabelText(input: TopListOptionInput, item: TopListItem, total: number): string {\n  const parts: string[] = [];\n  if (input.valueDisplay.includes(\"value\")) {\n    parts.push(`{value|${plainRichText(formatValueText(input, item.value))}}`);\n  }\n  if (input.valueDisplay.includes(\"percent\")) {\n    parts.push(`{percent|${formatShareText(item, total)}}`);\n  }\n  return parts.join(\"\");\n}\n\nexport function labeledRowStepFor(canvasHeightPx: number, itemCount: number): number {\n  const rowHeightPx: number = (canvasHeightPx - 2 * GRID_PADDING_PX) / itemCount;\n  return Math.max(1, Math.ceil(MIN_LABELED_ROW_HEIGHT_PX / rowHeightPx));\n}\n\nfunction isRowLabeled(rank: number | undefined, step: number): boolean {\n  return rank === undefined || (rank - 1) % step === 0;\n}\n\nfunction categoryAxis(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n): Record<string, unknown> {\n  const { items, sort, theme } = input;\n  const ranks: Map<string, number> = rankById(items, sort);\n  const step: number = input.labeledRowStep;\n  return {\n    type: \"category\",\n    data: items.map((item: TopListItem) => item.id),\n    inverse: sort === \"desc\",\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    axisLine: { show: false },\n    axisTick: { show: false },\n    axisLabel: {\n      color: theme.labelColor,\n      fontSize: LABEL_FONT_SIZE_PX,\n      interval: 0,\n      align: \"right\",\n      margin: NAME_TO_BAR_GAP_PX,\n      formatter: (id: string) => {\n        if (!isRowLabeled(ranks.get(id), step)) return \"\";\n        const item: TopListItem | undefined = itemsById.get(id);\n        return item ? truncatedName(item.name, theme) : \"\";\n      },\n    },\n  };\n}\n\nfunction tooltipFormatter(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): (params: { name: string }) => string {\n  return (params: { name: string }) => {\n    const item: TopListItem | undefined = itemsById.get(params.name);\n    if (!item) return \"\";\n    const share: string = item.value === null ? \"\" : ` · ${formatShare(shareOf(item, total))}`;\n    const value: string = escapeHtml(formatValueText(input, item.value));\n    return `<div>${escapeHtml(item.name)}</div><div><b>${value}</b>${share}</div>`;\n  };\n}\n\nfunction barEndLabel(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): Record<string, unknown> {\n  const { theme } = input;\n  const ranks: Map<string, number> = rankById(input.items, input.sort);\n  const step: number = input.labeledRowStep;\n  return {\n    show: input.valueDisplay.length > 0,\n    position: \"right\",\n    distance: BAR_END_LABEL_DISTANCE_PX,\n    fontSize: LABEL_FONT_SIZE_PX,\n    formatter: (params: { name: string }) => {\n      if (!isRowLabeled(ranks.get(params.name), step)) return \"\";\n      const item: TopListItem | undefined = itemsById.get(params.name);\n      return item ? barEndLabelText(input, item, total) : \"\";\n    },\n    rich: {\n      value: { color: theme.labelColor, fontWeight: 600, padding: [0, 8, 0, 0] },\n      percent: { color: theme.labelColor },\n    },\n  };\n}\n\nexport function buildTopListOption(input: TopListOptionInput): Record<string, unknown> {\n  const { items, theme, colorsByItemId } = input;\n  const itemsById: Map<string, TopListItem> = new Map(\n    items.map((item: TopListItem) => [item.id, item]),\n  );\n  const total: number = resolveTotal(items, input.total);\n  const maxValue: number = maxValueOf(items);\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const reservedRightPx: number = barEndLabelWidthPx(input.valueDisplay);\n  const fallbackColor: string = theme.seriesColors[0];\n  \n  return {\n    animation: true,\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    animationEasing: \"linear\",\n    animationEasingUpdate: \"linear\",\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      top: GRID_PADDING_PX,\n      bottom: GRID_PADDING_PX,\n      left: GRID_PADDING_PX + NAME_MAX_WIDTH_PX + NAME_TO_BAR_GAP_PX,\n      right: GRID_PADDING_PX + reservedRightPx,\n      containLabel: false,\n    },\n    tooltip: {\n      trigger: \"item\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      formatter: tooltipFormatter(input, itemsById, total),\n    },\n    xAxis: { type: \"value\", min: 0, max: maxValue, show: false },\n    yAxis: categoryAxis(input, itemsById),\n    series: [\n      {\n        id: VALUE_SERIES_ID,\n        type: \"bar\",\n        realtimeSort: true,\n        barMaxWidth: BAR_MAX_WIDTH_PX,\n        itemStyle: { borderRadius: [0, BAR_RADIUS_PX, BAR_RADIUS_PX, 0] },\n        data: items.map((item: TopListItem) => ({\n          id: item.id,\n          name: item.id,\n          value: [plottedValues.get(item.id) as number, item.id],\n          itemStyle: { color: colorsByItemId[item.id] ?? fallbackColor },\n        })),\n        encode: { x: 0, y: 1 },\n        label: barEndLabel(input, itemsById, total),\n      },\n    ],\n  };\n}\n"],"names":["EMPTY_VALUE_TEXT","NAME_MAX_WIDTH_PX","NAME_TO_BAR_GAP_PX","VALUE_COLUMN_WIDTH_PX","PERCENT_COLUMN_WIDTH_PX","GRID_PADDING_PX","BAR_MAX_WIDTH_PX","BAR_RADIUS_PX","BAR_END_LABEL_DISTANCE_PX","UPDATE_ANIMATION_MS","LABEL_FONT_SIZE_PX","MIN_LABELED_ROW_HEIGHT_PX","TIE_BREAK_RELATIVE_STEP","RICH_TEXT_RESERVED","VALUE_SERIES_ID","valueOf","item","maxValueOf","items","maxValue","smallestGapBetweenDistinctValues","distinctValues","first","second","gaps","value","index","tieBreakStepOf","relativeStep","stepThatKeepsDistinctValuesApart","plottedValuesById","tieBreakStep","position","rankById","sort","plottedValues","direction","ranked","resolveTotal","total","sum","shareOf","escapeHtml","text","plainRichText","truncatedName","name","theme","font","echarts","formatValueText","input","formatShareText","formatShare","barEndLabelWidthPx","valueDisplay","widths","width","barEndLabelText","parts","labeledRowStepFor","canvasHeightPx","itemCount","rowHeightPx","isRowLabeled","rank","step","categoryAxis","itemsById","ranks","id","tooltipFormatter","params","share","barEndLabel","buildTopListOption","colorsByItemId","reservedRightPx","fallbackColor"],"mappings":"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"}
+{"version":3,"file":"top-list-option.cjs","sources":["../../../../../../src/ui/components/charts/TopList/top-list-option.ts"],"sourcesContent":["import { formatShare } from \"../chart-share\";\nimport { echarts } from \"../echarts-modules\";\nimport type { ChartTheme } from \"../chart-theme\";\n\nexport interface TopListItem {\n  id: string;\n  name: string;\n  value: number | null;\n  colorToken?: string;\n}\n\nexport type TopListSort = \"desc\" | \"asc\";\n\nexport type TopListValueDisplay = \"value\" | \"percent\";\n\nexport interface TopListOptionInput {\n  items: TopListItem[];\n  sort: TopListSort;\n  total?: number;\n  valueDisplay: TopListValueDisplay[];\n  theme: ChartTheme;\n  colorsByItemId: Record<string, string>;\n  animate: boolean;\n  labeledRowStep: number;\n  canvasWidthPx: number;\n  valueFormatter?: (value: number) => string;\n}\n\nconst EMPTY_VALUE_TEXT: string = \"–\";\n\nconst NAME_TO_VALUE_GAP_PX: number = 12;\n\nconst VALUE_TO_PERCENT_GAP_PX: number = 8;\n\nconst VALUE_COLUMN_WIDTH_PX: number = 88;\n\nconst PERCENT_COLUMN_WIDTH_PX: number = 56;\n\nconst GRID_PADDING_PX: number = 16;\n\nconst GRID_SIDE_PADDING_PX: number = 4;\n\nconst BAR_WIDTH_PX: number = 6;\n\nconst BAR_RADIUS_PX: number = 3;\n\nconst LABEL_TO_BAR_GAP_PX: number = 6;\n\nconst UPDATE_ANIMATION_MS: number = 800;\n\nconst LABEL_FONT_SIZE_PX: number = 13;\n\nconst MIN_LABELED_ROW_HEIGHT_PX: number = 26;\n\nconst TIE_BREAK_RELATIVE_STEP: number = 1e-9;\n\nconst RICH_TEXT_RESERVED: RegExp = /[{}|]/g;\n\nconst VALUE_SERIES_ID: string = \"top-list-values\";\n\nconst TRACK_SERIES_ID: string = \"top-list-tracks\";\n\nfunction valueOf(item: TopListItem): number {\n  return item.value ?? 0;\n}\n\nfunction maxValueOf(items: TopListItem[]): number {\n  const maxValue: number = Math.max(...items.map(valueOf));\n  return maxValue > 0 ? maxValue : 1;\n}\n\nfunction smallestGapBetweenDistinctValues(items: TopListItem[]): number {\n  const distinctValues: number[] = [...new Set(items.map(valueOf))].sort(\n    (first: number, second: number) => first - second,\n  );\n  const gaps: number[] = distinctValues\n    .slice(1)\n    .map((value: number, index: number) => value - distinctValues[index]);\n  return gaps.length > 0 ? Math.min(...gaps) : Infinity;\n}\n\nfunction tieBreakStepOf(items: TopListItem[]): number {\n  const relativeStep: number = maxValueOf(items) * TIE_BREAK_RELATIVE_STEP;\n  const stepThatKeepsDistinctValuesApart: number =\n    smallestGapBetweenDistinctValues(items) / (items.length + 1);\n  return Math.min(relativeStep, stepThatKeepsDistinctValuesApart);\n}\n\nfunction plottedValuesById(items: TopListItem[]): Map<string, number> {\n  const tieBreakStep: number = tieBreakStepOf(items);\n  return new Map(\n    items.map((item: TopListItem, position: number) => [\n      item.id,\n      valueOf(item) + tieBreakStep * (items.length - position),\n    ]),\n  );\n}\n\nexport function rankById(items: TopListItem[], sort: TopListSort): Map<string, number> {\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const direction: number = sort === \"desc\" ? -1 : 1;\n  const ranked: TopListItem[] = [...items].sort(\n    (first: TopListItem, second: TopListItem) =>\n      direction * ((plottedValues.get(first.id) as number) - (plottedValues.get(second.id) as number)),\n  );\n  return new Map(ranked.map((item: TopListItem, index: number) => [item.id, index + 1]));\n}\n\nexport function resolveTotal(items: TopListItem[], total?: number): number {\n  return total ?? items.reduce((sum: number, item: TopListItem) => sum + valueOf(item), 0);\n}\n\nfunction shareOf(item: TopListItem, total: number): number {\n  return total === 0 ? 0 : valueOf(item) / total;\n}\n\nfunction escapeHtml(text: string): string {\n  return text.replace(/&/g, \"&amp;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\");\n}\n\nfunction plainRichText(text: string): string {\n  return text.replace(RICH_TEXT_RESERVED, \" \");\n}\n\nfunction valueColumnsWidthPx(valueDisplay: TopListValueDisplay[]): number {\n  const widths: number[] = [];\n  if (valueDisplay.includes(\"value\")) widths.push(VALUE_COLUMN_WIDTH_PX);\n  if (valueDisplay.includes(\"percent\")) widths.push(PERCENT_COLUMN_WIDTH_PX);\n  return widths.reduce((sum: number, width: number) => sum + width, 0);\n}\n\nfunction nameMaxWidthPx(input: TopListOptionInput): number {\n  const availablePx: number =\n    input.canvasWidthPx -\n    2 * GRID_SIDE_PADDING_PX -\n    valueColumnsWidthPx(input.valueDisplay) -\n    NAME_TO_VALUE_GAP_PX;\n  return Math.max(availablePx, 0);\n}\n\nfunction truncatedName(name: string, input: TopListOptionInput): string {\n  const font: string = `${LABEL_FONT_SIZE_PX}px ${input.theme.fontFamily}`;\n  return plainRichText(echarts.format.truncateText(name, nameMaxWidthPx(input), font, \"…\"));\n}\n\nfunction formatValueText(input: TopListOptionInput, value: number | null): string {\n  if (value === null) return EMPTY_VALUE_TEXT;\n  return input.valueFormatter ? input.valueFormatter(value) : String(value);\n}\n\nfunction formatShareText(item: TopListItem, total: number): string {\n  return item.value === null ? EMPTY_VALUE_TEXT : formatShare(shareOf(item, total));\n}\n\nfunction valueLabelText(input: TopListOptionInput, item: TopListItem, total: number): string {\n  const parts: string[] = [];\n  if (input.valueDisplay.includes(\"value\")) {\n    parts.push(`{value|${plainRichText(formatValueText(input, item.value))}}`);\n  }\n  if (input.valueDisplay.includes(\"percent\")) {\n    parts.push(`{percent|${formatShareText(item, total)}}`);\n  }\n  return parts.join(\"\");\n}\n\nexport function labeledRowStepFor(canvasHeightPx: number, itemCount: number): number {\n  const rowHeightPx: number = (canvasHeightPx - 2 * GRID_PADDING_PX) / itemCount;\n  return Math.max(1, Math.ceil(MIN_LABELED_ROW_HEIGHT_PX / rowHeightPx));\n}\n\nfunction isRowLabeled(rank: number | undefined, step: number): boolean {\n  return rank === undefined || (rank - 1) % step === 0;\n}\n\nfunction categoryAxis(input: TopListOptionInput): Record<string, unknown> {\n  return {\n    type: \"category\",\n    data: input.items.map((item: TopListItem) => item.id),\n    inverse: input.sort === \"desc\",\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    axisLine: { show: false },\n    axisTick: { show: false },\n    axisLabel: { show: false },\n  };\n}\n\nfunction tooltipFormatter(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): (params: { name: string }) => string {\n  return (params: { name: string }) => {\n    const item: TopListItem | undefined = itemsById.get(params.name);\n    if (!item) return \"\";\n    const share: string = item.value === null ? \"\" : ` · ${formatShare(shareOf(item, total))}`;\n    const value: string = escapeHtml(formatValueText(input, item.value));\n    return `<div>${escapeHtml(item.name)}</div><div><b>${value}</b>${share}</div>`;\n  };\n}\n\nfunction labelOffsetAboveBar(): number[] {\n  return [0, -(BAR_WIDTH_PX / 2 + LABEL_TO_BAR_GAP_PX)];\n}\n\nfunction nameLabel(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n): Record<string, unknown> {\n  const ranks: Map<string, number> = rankById(input.items, input.sort);\n  return {\n    show: true,\n    position: \"insideLeft\",\n    distance: 0,\n    align: \"left\",\n    verticalAlign: \"bottom\",\n    offset: labelOffsetAboveBar(),\n    color: input.theme.emphasizedLabelColor,\n    backgroundColor: input.theme.tooltipBackgroundColor,\n    fontSize: LABEL_FONT_SIZE_PX,\n    fontWeight: 500,\n    formatter: (params: { name: string }) => {\n      if (!isRowLabeled(ranks.get(params.name), input.labeledRowStep)) return \"\";\n      const item: TopListItem | undefined = itemsById.get(params.name);\n      return item ? truncatedName(item.name, input) : \"\";\n    },\n  };\n}\n\nfunction valueLabel(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): Record<string, unknown> {\n  const { theme } = input;\n  const ranks: Map<string, number> = rankById(input.items, input.sort);\n  return {\n    show: input.valueDisplay.length > 0,\n    backgroundColor: theme.tooltipBackgroundColor,\n    position: \"insideRight\",\n    distance: 0,\n    align: \"right\",\n    verticalAlign: \"bottom\",\n    offset: labelOffsetAboveBar(),\n    fontSize: LABEL_FONT_SIZE_PX,\n    formatter: (params: { name: string }) => {\n      if (!isRowLabeled(ranks.get(params.name), input.labeledRowStep)) return \"\";\n      const item: TopListItem | undefined = itemsById.get(params.name);\n      return item ? valueLabelText(input, item, total) : \"\";\n    },\n    rich: {\n      value: {\n        color: theme.labelColor,\n        fontWeight: 600,\n        padding: [0, input.valueDisplay.includes(\"percent\") ? VALUE_TO_PERCENT_GAP_PX : 0, 0, 0],\n      },\n      percent: { color: theme.labelColor },\n    },\n  };\n}\n\nfunction barRadius(): number[] {\n  return [BAR_RADIUS_PX, BAR_RADIUS_PX, BAR_RADIUS_PX, BAR_RADIUS_PX];\n}\n\nexport function buildTopListOption(input: TopListOptionInput): Record<string, unknown> {\n  const { items, theme, colorsByItemId } = input;\n  const itemsById: Map<string, TopListItem> = new Map(\n    items.map((item: TopListItem) => [item.id, item]),\n  );\n  const total: number = resolveTotal(items, input.total);\n  const maxValue: number = maxValueOf(items);\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const fallbackColor: string = theme.seriesColors[0];\n\n  return {\n    animation: true,\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    animationEasing: \"linear\",\n    animationEasingUpdate: \"linear\",\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      top: GRID_PADDING_PX,\n      bottom: GRID_PADDING_PX,\n      left: GRID_SIDE_PADDING_PX,\n      right: GRID_SIDE_PADDING_PX,\n      containLabel: false,\n    },\n    tooltip: {\n      trigger: \"item\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      formatter: tooltipFormatter(input, itemsById, total),\n    },\n    xAxis: { type: \"value\", min: 0, max: maxValue, show: false },\n    yAxis: categoryAxis(input),\n    series: [\n      {\n        id: TRACK_SERIES_ID,\n        type: \"bar\",\n        silent: true,\n        barWidth: BAR_WIDTH_PX,\n        barGap: \"-100%\",\n        itemStyle: { color: theme.trackColor, borderRadius: barRadius() },\n        data: items.map((item: TopListItem) => ({\n          id: item.id,\n          name: item.id,\n          value: [maxValue, item.id],\n        })),\n        encode: { x: 0, y: 1 },\n        label: valueLabel(input, itemsById, total),\n      },\n      {\n        id: VALUE_SERIES_ID,\n        type: \"bar\",\n        realtimeSort: true,\n        barWidth: BAR_WIDTH_PX,\n        barGap: \"-100%\",\n        itemStyle: { borderRadius: barRadius() },\n        data: items.map((item: TopListItem) => ({\n          id: item.id,\n          name: item.id,\n          value: [plottedValues.get(item.id) as number, item.id],\n          itemStyle: { color: colorsByItemId[item.id] ?? fallbackColor },\n        })),\n        encode: { x: 0, y: 1 },\n        label: nameLabel(input, itemsById),\n      },\n    ],\n  };\n}\n"],"names":["EMPTY_VALUE_TEXT","NAME_TO_VALUE_GAP_PX","VALUE_TO_PERCENT_GAP_PX","VALUE_COLUMN_WIDTH_PX","PERCENT_COLUMN_WIDTH_PX","GRID_PADDING_PX","GRID_SIDE_PADDING_PX","BAR_WIDTH_PX","BAR_RADIUS_PX","UPDATE_ANIMATION_MS","LABEL_FONT_SIZE_PX","MIN_LABELED_ROW_HEIGHT_PX","TIE_BREAK_RELATIVE_STEP","RICH_TEXT_RESERVED","VALUE_SERIES_ID","TRACK_SERIES_ID","valueOf","item","maxValueOf","items","maxValue","smallestGapBetweenDistinctValues","distinctValues","first","second","gaps","value","index","tieBreakStepOf","relativeStep","stepThatKeepsDistinctValuesApart","plottedValuesById","tieBreakStep","position","rankById","sort","plottedValues","direction","ranked","resolveTotal","total","sum","shareOf","escapeHtml","text","plainRichText","valueColumnsWidthPx","valueDisplay","widths","width","nameMaxWidthPx","input","availablePx","truncatedName","name","font","echarts","formatValueText","formatShareText","formatShare","valueLabelText","parts","labeledRowStepFor","canvasHeightPx","itemCount","rowHeightPx","isRowLabeled","rank","step","categoryAxis","tooltipFormatter","itemsById","params","share","labelOffsetAboveBar","nameLabel","ranks","valueLabel","theme","barRadius","buildTopListOption","colorsByItemId","fallbackColor"],"mappings":"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"}

package/dist/lib/ui/components/charts/TopList/top-list-option.js

@@ -1,178 +1,220 @@
-import { formatShare as _ } from "../chart-share.js";
+import { formatShare as g } from "../chart-share.js";
 import "echarts/charts";
 import "echarts/components";
-import * as L from "echarts/core";
+import * as P from "echarts/core";
 import "echarts/renderers";
-const g = "–", h = 160, E = 12, M = 88, P = 56, c = 16, B = 20, f = 4, b = 8, T = 800, m = 12, C = 14, w = 1e-9, V = /[{}|]/g, X = "top-list-values";
-function u(t) {
+const _ = "–", C = 12, L = 8, w = 88, B = 56, u = 16, d = 4, m = 6, c = 3, b = 800, f = 13, M = 26, V = 1e-9, k = /[{}|]/g, O = "top-list-values", N = "top-list-tracks";
+function s(t) {
   return t.value ?? 0;
 }
 function v(t) {
-  const e = Math.max(...t.map(u));
+  const e = Math.max(...t.map(s));
   return e > 0 ? e : 1;
 }
-function N(t) {
-  const e = [...new Set(t.map(u))].sort(
-    (o, a) => o - a
-  ), n = e.slice(1).map((o, a) => o - e[a]);
-  return n.length > 0 ? Math.min(...n) : 1 / 0;
+function U(t) {
+  const e = [...new Set(t.map(s))].sort(
+    (a, n) => a - n
+  ), o = e.slice(1).map((a, n) => a - e[n]);
+  return o.length > 0 ? Math.min(...o) : 1 / 0;
 }
-function O(t) {
-  const e = v(t) * w, n = N(t) / (t.length + 1);
-  return Math.min(e, n);
+function X(t) {
+  const e = v(t) * V, o = U(t) / (t.length + 1);
+  return Math.min(e, o);
 }
-function x(t) {
-  const e = O(t);
+function E(t) {
+  const e = X(t);
   return new Map(
-    t.map((n, o) => [
-      n.id,
-      u(n) + e * (t.length - o)
+    t.map((o, a) => [
+      o.id,
+      s(o) + e * (t.length - a)
     ])
   );
 }
-function A(t, e) {
-  const n = x(t), o = e === "desc" ? -1 : 1, a = [...t].sort(
-    (r, i) => o * (n.get(r.id) - n.get(i.id))
+function x(t, e) {
+  const o = E(t), a = e === "desc" ? -1 : 1, n = [...t].sort(
+    (l, i) => a * (o.get(l.id) - o.get(i.id))
   );
-  return new Map(a.map((r, i) => [r.id, i + 1]));
+  return new Map(n.map((l, i) => [l.id, i + 1]));
 }
-function U(t, e) {
-  return e ?? t.reduce((n, o) => n + u(o), 0);
+function W(t, e) {
+  return e ?? t.reduce((o, a) => o + s(a), 0);
 }
-function S(t, e) {
-  return e === 0 ? 0 : u(t) / e;
+function T(t, e) {
+  return e === 0 ? 0 : s(t) / e;
 }
 function p(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function I(t) {
-  return t.replace(V, " ");
+function A(t) {
+  return t.replace(k, " ");
 }
-function k(t, e) {
-  const n = `${m}px ${e.fontFamily}`;
-  return I(L.format.truncateText(t, h, n, "…"));
+function G(t) {
+  const e = [];
+  return t.includes("value") && e.push(w), t.includes("percent") && e.push(B), e.reduce((o, a) => o + a, 0);
 }
-function D(t, e) {
-  return e === null ? g : t.valueFormatter ? t.valueFormatter(e) : String(e);
+function F(t) {
+  const e = t.canvasWidthPx - 2 * d - G(t.valueDisplay) - C;
+  return Math.max(e, 0);
 }
 function H(t, e) {
-  return t.value === null ? g : _(S(t, e));
+  const o = `${f}px ${e.theme.fontFamily}`;
+  return A(P.format.truncateText(t, F(e), o, "…"));
 }
-function F(t) {
-  const e = [];
-  return t.includes("value") && e.push(M), t.includes("percent") && e.push(P), e.length === 0 ? 0 : e.reduce((n, o) => n + o, 0) + b;
+function S(t, e) {
+  return e === null ? _ : t.valueFormatter ? t.valueFormatter(e) : String(e);
 }
-function W(t, e, n) {
-  const o = [];
-  return t.valueDisplay.includes("value") && o.push(`{value|${I(D(t, e.value))}}`), t.valueDisplay.includes("percent") && o.push(`{percent|${H(e, n)}}`), o.join("");
+function $(t, e) {
+  return t.value === null ? _ : g(T(t, e));
+}
+function z(t, e, o) {
+  const a = [];
+  return t.valueDisplay.includes("value") && a.push(`{value|${A(S(t, e.value))}}`), t.valueDisplay.includes("percent") && a.push(`{percent|${$(e, o)}}`), a.join("");
 }
-function q(t, e) {
-  const n = (t - 2 * c) / e;
-  return Math.max(1, Math.ceil(C / n));
+function et(t, e) {
+  const o = (t - 2 * u) / e;
+  return Math.max(1, Math.ceil(M / o));
 }
-function y(t, e) {
+function I(t, e) {
   return t === void 0 || (t - 1) % e === 0;
 }
-function $(t, e) {
-  const { items: n, sort: o, theme: a } = t, r = A(n, o), i = t.labeledRowStep;
+function K(t) {
   return {
     type: "category",
-    data: n.map((l) => l.id),
-    inverse: o === "desc",
+    data: t.items.map((e) => e.id),
+    inverse: t.sort === "desc",
     animationDuration: 0,
-    animationDurationUpdate: t.animate ? T : 0,
+    animationDurationUpdate: t.animate ? b : 0,
     axisLine: { show: !1 },
     axisTick: { show: !1 },
-    axisLabel: {
-      color: a.labelColor,
-      fontSize: m,
-      interval: 0,
-      align: "right",
-      margin: E,
-      formatter: (l) => {
-        if (!y(r.get(l), i)) return "";
-        const d = e.get(l);
-        return d ? k(d.name, a) : "";
-      }
-    }
+    axisLabel: { show: !1 }
   };
 }
-function G(t, e, n) {
-  return (o) => {
-    const a = e.get(o.name);
-    if (!a) return "";
-    const r = a.value === null ? "" : ` · ${_(S(a, n))}`, i = p(D(t, a.value));
-    return `<div>${p(a.name)}</div><div><b>${i}</b>${r}</div>`;
+function j(t, e, o) {
+  return (a) => {
+    const n = e.get(a.name);
+    if (!n) return "";
+    const l = n.value === null ? "" : ` · ${g(T(n, o))}`, i = p(S(t, n.value));
+    return `<div>${p(n.name)}</div><div><b>${i}</b>${l}</div>`;
   };
 }
-function z(t, e, n) {
-  const { theme: o } = t, a = A(t.items, t.sort), r = t.labeledRowStep;
+function y() {
+  return [0, -9];
+}
+function Y(t, e) {
+  const o = x(t.items, t.sort);
+  return {
+    show: !0,
+    position: "insideLeft",
+    distance: 0,
+    align: "left",
+    verticalAlign: "bottom",
+    offset: y(),
+    color: t.theme.emphasizedLabelColor,
+    backgroundColor: t.theme.tooltipBackgroundColor,
+    fontSize: f,
+    fontWeight: 500,
+    formatter: (a) => {
+      if (!I(o.get(a.name), t.labeledRowStep)) return "";
+      const n = e.get(a.name);
+      return n ? H(n.name, t) : "";
+    }
+  };
+}
+function Z(t, e, o) {
+  const { theme: a } = t, n = x(t.items, t.sort);
   return {
     show: t.valueDisplay.length > 0,
-    position: "right",
-    distance: b,
-    fontSize: m,
-    formatter: (i) => {
-      if (!y(a.get(i.name), r)) return "";
-      const l = e.get(i.name);
-      return l ? W(t, l, n) : "";
+    backgroundColor: a.tooltipBackgroundColor,
+    position: "insideRight",
+    distance: 0,
+    align: "right",
+    verticalAlign: "bottom",
+    offset: y(),
+    fontSize: f,
+    formatter: (l) => {
+      if (!I(n.get(l.name), t.labeledRowStep)) return "";
+      const i = e.get(l.name);
+      return i ? z(t, i, o) : "";
     },
     rich: {
-      value: { color: o.labelColor, fontWeight: 600, padding: [0, 8, 0, 0] },
-      percent: { color: o.labelColor }
+      value: {
+        color: a.labelColor,
+        fontWeight: 600,
+        padding: [0, t.valueDisplay.includes("percent") ? L : 0, 0, 0]
+      },
+      percent: { color: a.labelColor }
     }
   };
 }
-function J(t) {
-  const { items: e, theme: n, colorsByItemId: o } = t, a = new Map(
-    e.map((s) => [s.id, s])
-  ), r = U(e, t.total), i = v(e), l = x(e), d = F(t.valueDisplay), R = n.seriesColors[0];
+function h() {
+  return [c, c, c, c];
+}
+function ot(t) {
+  const { items: e, theme: o, colorsByItemId: a } = t, n = new Map(
+    e.map((r) => [r.id, r])
+  ), l = W(e, t.total), i = v(e), D = E(e), R = o.seriesColors[0];
   return {
     animation: !0,
     animationDuration: 0,
-    animationDurationUpdate: t.animate ? T : 0,
+    animationDurationUpdate: t.animate ? b : 0,
     animationEasing: "linear",
     animationEasingUpdate: "linear",
-    textStyle: { fontFamily: n.fontFamily, color: n.labelColor },
+    textStyle: { fontFamily: o.fontFamily, color: o.labelColor },
     grid: {
-      top: c,
-      bottom: c,
-      left: c + h + E,
-      right: c + d,
+      top: u,
+      bottom: u,
+      left: d,
+      right: d,
       containLabel: !1
     },
     tooltip: {
       trigger: "item",
-      backgroundColor: n.tooltipBackgroundColor,
-      borderColor: n.tooltipBorderColor,
-      textStyle: { color: n.labelColor },
-      formatter: G(t, a, r)
+      backgroundColor: o.tooltipBackgroundColor,
+      borderColor: o.tooltipBorderColor,
+      textStyle: { color: o.labelColor },
+      formatter: j(t, n, l)
     },
     xAxis: { type: "value", min: 0, max: i, show: !1 },
-    yAxis: $(t, a),
+    yAxis: K(t),
     series: [
       {
-        id: X,
+        id: N,
+        type: "bar",
+        silent: !0,
+        barWidth: m,
+        barGap: "-100%",
+        itemStyle: { color: o.trackColor, borderRadius: h() },
+        data: e.map((r) => ({
+          id: r.id,
+          name: r.id,
+          value: [i, r.id]
+        })),
+        encode: { x: 0, y: 1 },
+        label: Z(t, n, l)
+      },
+      {
+        id: O,
         type: "bar",
         realtimeSort: !0,
-        barMaxWidth: B,
-        itemStyle: { borderRadius: [0, f, f, 0] },
-        data: e.map((s) => ({
-          id: s.id,
-          name: s.id,
-          value: [l.get(s.id), s.id],
-          itemStyle: { color: o[s.id] ?? R }
+        barWidth: m,
+        barGap: "-100%",
+        itemStyle: { borderRadius: h() },
+        data: e.map((r) => ({
+          id: r.id,
+          name: r.id,
+          value: [D.get(r.id), r.id],
+          itemStyle: { color: a[r.id] ?? R }
         })),
         encode: { x: 0, y: 1 },
-        label: z(t, a, r)
+        label: Y(t, n)
       }
     ]
   };
 }
 export {
-  J as buildTopListOption,
-  q as labeledRowStepFor,
-  A as rankById,
-  U as resolveTotal
+  ot as buildTopListOption,
+  et as labeledRowStepFor,
+  x as rankById,
+  W as resolveTotal
 };
 //# sourceMappingURL=top-list-option.js.map

package/dist/lib/ui/components/charts/TopList/top-list-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-list-option.js","sources":["../../../../../../src/ui/components/charts/TopList/top-list-option.ts"],"sourcesContent":["import { formatShare } from \"../chart-share\";\nimport { echarts } from \"../echarts-modules\";\nimport type { ChartTheme } from \"../chart-theme\";\n\nexport interface TopListItem {\n  id: string;\n  name: string;\n  value: number | null;\n  colorToken?: string;\n}\n\nexport type TopListSort = \"desc\" | \"asc\";\n\nexport type TopListValueDisplay = \"value\" | \"percent\";\n\nexport interface TopListOptionInput {\n  items: TopListItem[];\n  sort: TopListSort;\n  total?: number;\n  valueDisplay: TopListValueDisplay[];\n  theme: ChartTheme;\n  colorsByItemId: Record<string, string>;\n  animate: boolean;\n  labeledRowStep: number;\n  valueFormatter?: (value: number) => string;\n}\n\nconst EMPTY_VALUE_TEXT: string = \"–\";\n\nconst NAME_MAX_WIDTH_PX: number = 160;\n\nconst NAME_TO_BAR_GAP_PX: number = 12;\n\nconst VALUE_COLUMN_WIDTH_PX: number = 88;\n\nconst PERCENT_COLUMN_WIDTH_PX: number = 56;\n\nconst GRID_PADDING_PX: number = 16;\n\nconst BAR_MAX_WIDTH_PX: number = 20;\n\nconst BAR_RADIUS_PX: number = 4;\n\nconst BAR_END_LABEL_DISTANCE_PX: number = 8;\n\nconst UPDATE_ANIMATION_MS: number = 800;\n\nconst LABEL_FONT_SIZE_PX: number = 12;\n\nconst MIN_LABELED_ROW_HEIGHT_PX: number = 14;\n\nconst TIE_BREAK_RELATIVE_STEP: number = 1e-9;\n\nconst RICH_TEXT_RESERVED: RegExp = /[{}|]/g;\n\nconst VALUE_SERIES_ID: string = \"top-list-values\";\n\n\nfunction valueOf(item: TopListItem): number {\n  return item.value ?? 0;\n}\n\nfunction maxValueOf(items: TopListItem[]): number {\n  const maxValue: number = Math.max(...items.map(valueOf));\n  return maxValue > 0 ? maxValue : 1;\n}\n\nfunction smallestGapBetweenDistinctValues(items: TopListItem[]): number {\n  const distinctValues: number[] = [...new Set(items.map(valueOf))].sort(\n    (first: number, second: number) => first - second,\n  );\n  const gaps: number[] = distinctValues\n    .slice(1)\n    .map((value: number, index: number) => value - distinctValues[index]);\n  return gaps.length > 0 ? Math.min(...gaps) : Infinity;\n}\n\nfunction tieBreakStepOf(items: TopListItem[]): number {\n  const relativeStep: number = maxValueOf(items) * TIE_BREAK_RELATIVE_STEP;\n  const stepThatKeepsDistinctValuesApart: number =\n    smallestGapBetweenDistinctValues(items) / (items.length + 1);\n  return Math.min(relativeStep, stepThatKeepsDistinctValuesApart);\n}\n\nfunction plottedValuesById(items: TopListItem[]): Map<string, number> {\n  const tieBreakStep: number = tieBreakStepOf(items);\n  return new Map(\n    items.map((item: TopListItem, position: number) => [\n      item.id,\n      valueOf(item) + tieBreakStep * (items.length - position),\n    ]),\n  );\n}\n\nexport function rankById(items: TopListItem[], sort: TopListSort): Map<string, number> {\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const direction: number = sort === \"desc\" ? -1 : 1;\n  const ranked: TopListItem[] = [...items].sort(\n    (first: TopListItem, second: TopListItem) =>\n      direction * ((plottedValues.get(first.id) as number) - (plottedValues.get(second.id) as number)),\n  );\n  return new Map(ranked.map((item: TopListItem, index: number) => [item.id, index + 1]));\n}\n\nexport function resolveTotal(items: TopListItem[], total?: number): number {\n  return total ?? items.reduce((sum: number, item: TopListItem) => sum + valueOf(item), 0);\n}\n\nfunction shareOf(item: TopListItem, total: number): number {\n  return total === 0 ? 0 : valueOf(item) / total;\n}\n\nfunction escapeHtml(text: string): string {\n  return text.replace(/&/g, \"&amp;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\");\n}\n\nfunction plainRichText(text: string): string {\n  return text.replace(RICH_TEXT_RESERVED, \" \");\n}\n\nfunction truncatedName(name: string, theme: ChartTheme): string {\n  const font: string = `${LABEL_FONT_SIZE_PX}px ${theme.fontFamily}`;\n  return plainRichText(echarts.format.truncateText(name, NAME_MAX_WIDTH_PX, font, \"…\"));\n}\n\nfunction formatValueText(input: TopListOptionInput, value: number | null): string {\n  if (value === null) return EMPTY_VALUE_TEXT;\n  return input.valueFormatter ? input.valueFormatter(value) : String(value);\n}\n\nfunction formatShareText(item: TopListItem, total: number): string {\n  return item.value === null ? EMPTY_VALUE_TEXT : formatShare(shareOf(item, total));\n}\n\nfunction barEndLabelWidthPx(valueDisplay: TopListValueDisplay[]): number {\n  const widths: number[] = [];\n  if (valueDisplay.includes(\"value\")) widths.push(VALUE_COLUMN_WIDTH_PX);\n  if (valueDisplay.includes(\"percent\")) widths.push(PERCENT_COLUMN_WIDTH_PX);\n  if (widths.length === 0) return 0;\n  return widths.reduce((sum: number, width: number) => sum + width, 0) + BAR_END_LABEL_DISTANCE_PX;\n}\n\nfunction barEndLabelText(input: TopListOptionInput, item: TopListItem, total: number): string {\n  const parts: string[] = [];\n  if (input.valueDisplay.includes(\"value\")) {\n    parts.push(`{value|${plainRichText(formatValueText(input, item.value))}}`);\n  }\n  if (input.valueDisplay.includes(\"percent\")) {\n    parts.push(`{percent|${formatShareText(item, total)}}`);\n  }\n  return parts.join(\"\");\n}\n\nexport function labeledRowStepFor(canvasHeightPx: number, itemCount: number): number {\n  const rowHeightPx: number = (canvasHeightPx - 2 * GRID_PADDING_PX) / itemCount;\n  return Math.max(1, Math.ceil(MIN_LABELED_ROW_HEIGHT_PX / rowHeightPx));\n}\n\nfunction isRowLabeled(rank: number | undefined, step: number): boolean {\n  return rank === undefined || (rank - 1) % step === 0;\n}\n\nfunction categoryAxis(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n): Record<string, unknown> {\n  const { items, sort, theme } = input;\n  const ranks: Map<string, number> = rankById(items, sort);\n  const step: number = input.labeledRowStep;\n  return {\n    type: \"category\",\n    data: items.map((item: TopListItem) => item.id),\n    inverse: sort === \"desc\",\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    axisLine: { show: false },\n    axisTick: { show: false },\n    axisLabel: {\n      color: theme.labelColor,\n      fontSize: LABEL_FONT_SIZE_PX,\n      interval: 0,\n      align: \"right\",\n      margin: NAME_TO_BAR_GAP_PX,\n      formatter: (id: string) => {\n        if (!isRowLabeled(ranks.get(id), step)) return \"\";\n        const item: TopListItem | undefined = itemsById.get(id);\n        return item ? truncatedName(item.name, theme) : \"\";\n      },\n    },\n  };\n}\n\nfunction tooltipFormatter(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): (params: { name: string }) => string {\n  return (params: { name: string }) => {\n    const item: TopListItem | undefined = itemsById.get(params.name);\n    if (!item) return \"\";\n    const share: string = item.value === null ? \"\" : ` · ${formatShare(shareOf(item, total))}`;\n    const value: string = escapeHtml(formatValueText(input, item.value));\n    return `<div>${escapeHtml(item.name)}</div><div><b>${value}</b>${share}</div>`;\n  };\n}\n\nfunction barEndLabel(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): Record<string, unknown> {\n  const { theme } = input;\n  const ranks: Map<string, number> = rankById(input.items, input.sort);\n  const step: number = input.labeledRowStep;\n  return {\n    show: input.valueDisplay.length > 0,\n    position: \"right\",\n    distance: BAR_END_LABEL_DISTANCE_PX,\n    fontSize: LABEL_FONT_SIZE_PX,\n    formatter: (params: { name: string }) => {\n      if (!isRowLabeled(ranks.get(params.name), step)) return \"\";\n      const item: TopListItem | undefined = itemsById.get(params.name);\n      return item ? barEndLabelText(input, item, total) : \"\";\n    },\n    rich: {\n      value: { color: theme.labelColor, fontWeight: 600, padding: [0, 8, 0, 0] },\n      percent: { color: theme.labelColor },\n    },\n  };\n}\n\nexport function buildTopListOption(input: TopListOptionInput): Record<string, unknown> {\n  const { items, theme, colorsByItemId } = input;\n  const itemsById: Map<string, TopListItem> = new Map(\n    items.map((item: TopListItem) => [item.id, item]),\n  );\n  const total: number = resolveTotal(items, input.total);\n  const maxValue: number = maxValueOf(items);\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const reservedRightPx: number = barEndLabelWidthPx(input.valueDisplay);\n  const fallbackColor: string = theme.seriesColors[0];\n  \n  return {\n    animation: true,\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    animationEasing: \"linear\",\n    animationEasingUpdate: \"linear\",\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      top: GRID_PADDING_PX,\n      bottom: GRID_PADDING_PX,\n      left: GRID_PADDING_PX + NAME_MAX_WIDTH_PX + NAME_TO_BAR_GAP_PX,\n      right: GRID_PADDING_PX + reservedRightPx,\n      containLabel: false,\n    },\n    tooltip: {\n      trigger: \"item\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      formatter: tooltipFormatter(input, itemsById, total),\n    },\n    xAxis: { type: \"value\", min: 0, max: maxValue, show: false },\n    yAxis: categoryAxis(input, itemsById),\n    series: [\n      {\n        id: VALUE_SERIES_ID,\n        type: \"bar\",\n        realtimeSort: true,\n        barMaxWidth: BAR_MAX_WIDTH_PX,\n        itemStyle: { borderRadius: [0, BAR_RADIUS_PX, BAR_RADIUS_PX, 0] },\n        data: items.map((item: TopListItem) => ({\n          id: item.id,\n          name: item.id,\n          value: [plottedValues.get(item.id) as number, item.id],\n          itemStyle: { color: colorsByItemId[item.id] ?? fallbackColor },\n        })),\n        encode: { x: 0, y: 1 },\n        label: barEndLabel(input, itemsById, total),\n      },\n    ],\n  };\n}\n"],"names":["EMPTY_VALUE_TEXT","NAME_MAX_WIDTH_PX","NAME_TO_BAR_GAP_PX","VALUE_COLUMN_WIDTH_PX","PERCENT_COLUMN_WIDTH_PX","GRID_PADDING_PX","BAR_MAX_WIDTH_PX","BAR_RADIUS_PX","BAR_END_LABEL_DISTANCE_PX","UPDATE_ANIMATION_MS","LABEL_FONT_SIZE_PX","MIN_LABELED_ROW_HEIGHT_PX","TIE_BREAK_RELATIVE_STEP","RICH_TEXT_RESERVED","VALUE_SERIES_ID","valueOf","item","maxValueOf","items","maxValue","smallestGapBetweenDistinctValues","distinctValues","first","second","gaps","value","index","tieBreakStepOf","relativeStep","stepThatKeepsDistinctValuesApart","plottedValuesById","tieBreakStep","position","rankById","sort","plottedValues","direction","ranked","resolveTotal","total","sum","shareOf","escapeHtml","text","plainRichText","truncatedName","name","theme","font","echarts","formatValueText","input","formatShareText","formatShare","barEndLabelWidthPx","valueDisplay","widths","width","barEndLabelText","parts","labeledRowStepFor","canvasHeightPx","itemCount","rowHeightPx","isRowLabeled","rank","step","categoryAxis","itemsById","ranks","id","tooltipFormatter","params","share","barEndLabel","buildTopListOption","colorsByItemId","reservedRightPx","fallbackColor"],"mappings":"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"}
+{"version":3,"file":"top-list-option.js","sources":["../../../../../../src/ui/components/charts/TopList/top-list-option.ts"],"sourcesContent":["import { formatShare } from \"../chart-share\";\nimport { echarts } from \"../echarts-modules\";\nimport type { ChartTheme } from \"../chart-theme\";\n\nexport interface TopListItem {\n  id: string;\n  name: string;\n  value: number | null;\n  colorToken?: string;\n}\n\nexport type TopListSort = \"desc\" | \"asc\";\n\nexport type TopListValueDisplay = \"value\" | \"percent\";\n\nexport interface TopListOptionInput {\n  items: TopListItem[];\n  sort: TopListSort;\n  total?: number;\n  valueDisplay: TopListValueDisplay[];\n  theme: ChartTheme;\n  colorsByItemId: Record<string, string>;\n  animate: boolean;\n  labeledRowStep: number;\n  canvasWidthPx: number;\n  valueFormatter?: (value: number) => string;\n}\n\nconst EMPTY_VALUE_TEXT: string = \"–\";\n\nconst NAME_TO_VALUE_GAP_PX: number = 12;\n\nconst VALUE_TO_PERCENT_GAP_PX: number = 8;\n\nconst VALUE_COLUMN_WIDTH_PX: number = 88;\n\nconst PERCENT_COLUMN_WIDTH_PX: number = 56;\n\nconst GRID_PADDING_PX: number = 16;\n\nconst GRID_SIDE_PADDING_PX: number = 4;\n\nconst BAR_WIDTH_PX: number = 6;\n\nconst BAR_RADIUS_PX: number = 3;\n\nconst LABEL_TO_BAR_GAP_PX: number = 6;\n\nconst UPDATE_ANIMATION_MS: number = 800;\n\nconst LABEL_FONT_SIZE_PX: number = 13;\n\nconst MIN_LABELED_ROW_HEIGHT_PX: number = 26;\n\nconst TIE_BREAK_RELATIVE_STEP: number = 1e-9;\n\nconst RICH_TEXT_RESERVED: RegExp = /[{}|]/g;\n\nconst VALUE_SERIES_ID: string = \"top-list-values\";\n\nconst TRACK_SERIES_ID: string = \"top-list-tracks\";\n\nfunction valueOf(item: TopListItem): number {\n  return item.value ?? 0;\n}\n\nfunction maxValueOf(items: TopListItem[]): number {\n  const maxValue: number = Math.max(...items.map(valueOf));\n  return maxValue > 0 ? maxValue : 1;\n}\n\nfunction smallestGapBetweenDistinctValues(items: TopListItem[]): number {\n  const distinctValues: number[] = [...new Set(items.map(valueOf))].sort(\n    (first: number, second: number) => first - second,\n  );\n  const gaps: number[] = distinctValues\n    .slice(1)\n    .map((value: number, index: number) => value - distinctValues[index]);\n  return gaps.length > 0 ? Math.min(...gaps) : Infinity;\n}\n\nfunction tieBreakStepOf(items: TopListItem[]): number {\n  const relativeStep: number = maxValueOf(items) * TIE_BREAK_RELATIVE_STEP;\n  const stepThatKeepsDistinctValuesApart: number =\n    smallestGapBetweenDistinctValues(items) / (items.length + 1);\n  return Math.min(relativeStep, stepThatKeepsDistinctValuesApart);\n}\n\nfunction plottedValuesById(items: TopListItem[]): Map<string, number> {\n  const tieBreakStep: number = tieBreakStepOf(items);\n  return new Map(\n    items.map((item: TopListItem, position: number) => [\n      item.id,\n      valueOf(item) + tieBreakStep * (items.length - position),\n    ]),\n  );\n}\n\nexport function rankById(items: TopListItem[], sort: TopListSort): Map<string, number> {\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const direction: number = sort === \"desc\" ? -1 : 1;\n  const ranked: TopListItem[] = [...items].sort(\n    (first: TopListItem, second: TopListItem) =>\n      direction * ((plottedValues.get(first.id) as number) - (plottedValues.get(second.id) as number)),\n  );\n  return new Map(ranked.map((item: TopListItem, index: number) => [item.id, index + 1]));\n}\n\nexport function resolveTotal(items: TopListItem[], total?: number): number {\n  return total ?? items.reduce((sum: number, item: TopListItem) => sum + valueOf(item), 0);\n}\n\nfunction shareOf(item: TopListItem, total: number): number {\n  return total === 0 ? 0 : valueOf(item) / total;\n}\n\nfunction escapeHtml(text: string): string {\n  return text.replace(/&/g, \"&amp;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\");\n}\n\nfunction plainRichText(text: string): string {\n  return text.replace(RICH_TEXT_RESERVED, \" \");\n}\n\nfunction valueColumnsWidthPx(valueDisplay: TopListValueDisplay[]): number {\n  const widths: number[] = [];\n  if (valueDisplay.includes(\"value\")) widths.push(VALUE_COLUMN_WIDTH_PX);\n  if (valueDisplay.includes(\"percent\")) widths.push(PERCENT_COLUMN_WIDTH_PX);\n  return widths.reduce((sum: number, width: number) => sum + width, 0);\n}\n\nfunction nameMaxWidthPx(input: TopListOptionInput): number {\n  const availablePx: number =\n    input.canvasWidthPx -\n    2 * GRID_SIDE_PADDING_PX -\n    valueColumnsWidthPx(input.valueDisplay) -\n    NAME_TO_VALUE_GAP_PX;\n  return Math.max(availablePx, 0);\n}\n\nfunction truncatedName(name: string, input: TopListOptionInput): string {\n  const font: string = `${LABEL_FONT_SIZE_PX}px ${input.theme.fontFamily}`;\n  return plainRichText(echarts.format.truncateText(name, nameMaxWidthPx(input), font, \"…\"));\n}\n\nfunction formatValueText(input: TopListOptionInput, value: number | null): string {\n  if (value === null) return EMPTY_VALUE_TEXT;\n  return input.valueFormatter ? input.valueFormatter(value) : String(value);\n}\n\nfunction formatShareText(item: TopListItem, total: number): string {\n  return item.value === null ? EMPTY_VALUE_TEXT : formatShare(shareOf(item, total));\n}\n\nfunction valueLabelText(input: TopListOptionInput, item: TopListItem, total: number): string {\n  const parts: string[] = [];\n  if (input.valueDisplay.includes(\"value\")) {\n    parts.push(`{value|${plainRichText(formatValueText(input, item.value))}}`);\n  }\n  if (input.valueDisplay.includes(\"percent\")) {\n    parts.push(`{percent|${formatShareText(item, total)}}`);\n  }\n  return parts.join(\"\");\n}\n\nexport function labeledRowStepFor(canvasHeightPx: number, itemCount: number): number {\n  const rowHeightPx: number = (canvasHeightPx - 2 * GRID_PADDING_PX) / itemCount;\n  return Math.max(1, Math.ceil(MIN_LABELED_ROW_HEIGHT_PX / rowHeightPx));\n}\n\nfunction isRowLabeled(rank: number | undefined, step: number): boolean {\n  return rank === undefined || (rank - 1) % step === 0;\n}\n\nfunction categoryAxis(input: TopListOptionInput): Record<string, unknown> {\n  return {\n    type: \"category\",\n    data: input.items.map((item: TopListItem) => item.id),\n    inverse: input.sort === \"desc\",\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    axisLine: { show: false },\n    axisTick: { show: false },\n    axisLabel: { show: false },\n  };\n}\n\nfunction tooltipFormatter(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): (params: { name: string }) => string {\n  return (params: { name: string }) => {\n    const item: TopListItem | undefined = itemsById.get(params.name);\n    if (!item) return \"\";\n    const share: string = item.value === null ? \"\" : ` · ${formatShare(shareOf(item, total))}`;\n    const value: string = escapeHtml(formatValueText(input, item.value));\n    return `<div>${escapeHtml(item.name)}</div><div><b>${value}</b>${share}</div>`;\n  };\n}\n\nfunction labelOffsetAboveBar(): number[] {\n  return [0, -(BAR_WIDTH_PX / 2 + LABEL_TO_BAR_GAP_PX)];\n}\n\nfunction nameLabel(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n): Record<string, unknown> {\n  const ranks: Map<string, number> = rankById(input.items, input.sort);\n  return {\n    show: true,\n    position: \"insideLeft\",\n    distance: 0,\n    align: \"left\",\n    verticalAlign: \"bottom\",\n    offset: labelOffsetAboveBar(),\n    color: input.theme.emphasizedLabelColor,\n    backgroundColor: input.theme.tooltipBackgroundColor,\n    fontSize: LABEL_FONT_SIZE_PX,\n    fontWeight: 500,\n    formatter: (params: { name: string }) => {\n      if (!isRowLabeled(ranks.get(params.name), input.labeledRowStep)) return \"\";\n      const item: TopListItem | undefined = itemsById.get(params.name);\n      return item ? truncatedName(item.name, input) : \"\";\n    },\n  };\n}\n\nfunction valueLabel(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): Record<string, unknown> {\n  const { theme } = input;\n  const ranks: Map<string, number> = rankById(input.items, input.sort);\n  return {\n    show: input.valueDisplay.length > 0,\n    backgroundColor: theme.tooltipBackgroundColor,\n    position: \"insideRight\",\n    distance: 0,\n    align: \"right\",\n    verticalAlign: \"bottom\",\n    offset: labelOffsetAboveBar(),\n    fontSize: LABEL_FONT_SIZE_PX,\n    formatter: (params: { name: string }) => {\n      if (!isRowLabeled(ranks.get(params.name), input.labeledRowStep)) return \"\";\n      const item: TopListItem | undefined = itemsById.get(params.name);\n      return item ? valueLabelText(input, item, total) : \"\";\n    },\n    rich: {\n      value: {\n        color: theme.labelColor,\n        fontWeight: 600,\n        padding: [0, input.valueDisplay.includes(\"percent\") ? VALUE_TO_PERCENT_GAP_PX : 0, 0, 0],\n      },\n      percent: { color: theme.labelColor },\n    },\n  };\n}\n\nfunction barRadius(): number[] {\n  return [BAR_RADIUS_PX, BAR_RADIUS_PX, BAR_RADIUS_PX, BAR_RADIUS_PX];\n}\n\nexport function buildTopListOption(input: TopListOptionInput): Record<string, unknown> {\n  const { items, theme, colorsByItemId } = input;\n  const itemsById: Map<string, TopListItem> = new Map(\n    items.map((item: TopListItem) => [item.id, item]),\n  );\n  const total: number = resolveTotal(items, input.total);\n  const maxValue: number = maxValueOf(items);\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const fallbackColor: string = theme.seriesColors[0];\n\n  return {\n    animation: true,\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    animationEasing: \"linear\",\n    animationEasingUpdate: \"linear\",\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      top: GRID_PADDING_PX,\n      bottom: GRID_PADDING_PX,\n      left: GRID_SIDE_PADDING_PX,\n      right: GRID_SIDE_PADDING_PX,\n      containLabel: false,\n    },\n    tooltip: {\n      trigger: \"item\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      formatter: tooltipFormatter(input, itemsById, total),\n    },\n    xAxis: { type: \"value\", min: 0, max: maxValue, show: false },\n    yAxis: categoryAxis(input),\n    series: [\n      {\n        id: TRACK_SERIES_ID,\n        type: \"bar\",\n        silent: true,\n        barWidth: BAR_WIDTH_PX,\n        barGap: \"-100%\",\n        itemStyle: { color: theme.trackColor, borderRadius: barRadius() },\n        data: items.map((item: TopListItem) => ({\n          id: item.id,\n          name: item.id,\n          value: [maxValue, item.id],\n        })),\n        encode: { x: 0, y: 1 },\n        label: valueLabel(input, itemsById, total),\n      },\n      {\n        id: VALUE_SERIES_ID,\n        type: \"bar\",\n        realtimeSort: true,\n        barWidth: BAR_WIDTH_PX,\n        barGap: \"-100%\",\n        itemStyle: { borderRadius: barRadius() },\n        data: items.map((item: TopListItem) => ({\n          id: item.id,\n          name: item.id,\n          value: [plottedValues.get(item.id) as number, item.id],\n          itemStyle: { color: colorsByItemId[item.id] ?? fallbackColor },\n        })),\n        encode: { x: 0, y: 1 },\n        label: nameLabel(input, itemsById),\n      },\n    ],\n  };\n}\n"],"names":["EMPTY_VALUE_TEXT","NAME_TO_VALUE_GAP_PX","VALUE_TO_PERCENT_GAP_PX","VALUE_COLUMN_WIDTH_PX","PERCENT_COLUMN_WIDTH_PX","GRID_PADDING_PX","GRID_SIDE_PADDING_PX","BAR_WIDTH_PX","BAR_RADIUS_PX","UPDATE_ANIMATION_MS","LABEL_FONT_SIZE_PX","MIN_LABELED_ROW_HEIGHT_PX","TIE_BREAK_RELATIVE_STEP","RICH_TEXT_RESERVED","VALUE_SERIES_ID","TRACK_SERIES_ID","valueOf","item","maxValueOf","items","maxValue","smallestGapBetweenDistinctValues","distinctValues","first","second","gaps","value","index","tieBreakStepOf","relativeStep","stepThatKeepsDistinctValuesApart","plottedValuesById","tieBreakStep","position","rankById","sort","plottedValues","direction","ranked","resolveTotal","total","sum","shareOf","escapeHtml","text","plainRichText","valueColumnsWidthPx","valueDisplay","widths","width","nameMaxWidthPx","input","availablePx","truncatedName","name","font","echarts","formatValueText","formatShareText","formatShare","valueLabelText","parts","labeledRowStepFor","canvasHeightPx","itemCount","rowHeightPx","isRowLabeled","rank","step","categoryAxis","tooltipFormatter","itemsById","params","share","labelOffsetAboveBar","nameLabel","ranks","valueLabel","theme","barRadius","buildTopListOption","colorsByItemId","fallbackColor"],"mappings":"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"}

package/dist/lib/ui/components/charts/chart-theme.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./chart-palette.cjs");function d(t,e){const r=window.getComputedStyle(t).getPropertyValue(e).trim();return r===""?void 0:r}function o(t,e,r){const l=t.getPropertyValue(e).trim();return l===""?r:l}function n(t){const e=window.getComputedStyle(t);return{seriesColors:a.CHART_SERIES_COLOR_TOKENS.map(r=>o(e,r,"#4b5563")),neutralColor:o(e,a.CHART_NEUTRAL_COLOR_TOKEN,"#9ca3af"),axisLineColor:o(e,"--sds-color-border-default-secondary","#9ca3af"),splitLineColor:o(e,"--sds-color-border-default-default","#e5e7eb"),labelColor:o(e,"--sds-color-text-default-secondary","#6b7280"),tooltipBackgroundColor:o(e,"--sds-color-background-default-default","#ffffff"),tooltipBorderColor:o(e,"--sds-color-border-default-default","#d1d5db"),fontFamily:o(e,"--sds-typography-body-font-family","inherit")}}exports.readChartTheme=n;exports.resolveColorToken=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./chart-palette.cjs");function d(t,o){const r=window.getComputedStyle(t).getPropertyValue(o).trim();return r===""?void 0:r}function e(t,o,r){const l=t.getPropertyValue(o).trim();return l===""?r:l}function s(t){const o=window.getComputedStyle(t);return{seriesColors:a.CHART_SERIES_COLOR_TOKENS.map(r=>e(o,r,"#4b5563")),neutralColor:e(o,a.CHART_NEUTRAL_COLOR_TOKEN,"#9ca3af"),axisLineColor:e(o,"--sds-color-border-default-secondary","#9ca3af"),splitLineColor:e(o,"--sds-color-border-default-default","#e5e7eb"),labelColor:e(o,"--sds-color-text-default-secondary","#6b7280"),emphasizedLabelColor:e(o,"--sds-color-text-default-default","#111827"),trackColor:e(o,"--sds-color-background-default-secondary","#f3f4f6"),tooltipBackgroundColor:e(o,"--sds-color-background-default-default","#ffffff"),tooltipBorderColor:e(o,"--sds-color-border-default-default","#d1d5db"),fontFamily:e(o,"--sds-typography-body-font-family","inherit")}}exports.readChartTheme=s;exports.resolveColorToken=d;
 //# sourceMappingURL=chart-theme.cjs.map

package/dist/lib/ui/components/charts/chart-theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chart-theme.cjs","sources":["../../../../../src/ui/components/charts/chart-theme.ts"],"sourcesContent":["import { CHART_SERIES_COLOR_TOKENS, CHART_NEUTRAL_COLOR_TOKEN as NEUTRAL_COLOR_TOKEN } from \"./chart-palette\";\n\nexport interface ChartTheme {\n  seriesColors: string[];\n  neutralColor: string;\n  axisLineColor: string;\n  splitLineColor: string;\n  labelColor: string;\n  tooltipBackgroundColor: string;\n  tooltipBorderColor: string;\n  fontFamily: string;\n}\n\n// O renderizador canvas não entende `var(--token)`, então a cor precisa chegar resolvida. A\n// resolução é contra o elemento hospedeiro para que tema aplicado em escopo menor que `:root`\n// continue valendo.\nexport function resolveColorToken(element: HTMLElement, token: string): string | undefined {\n  const value: string = window.getComputedStyle(element).getPropertyValue(token).trim();\n  return value === \"\" ? undefined : value;\n}\n\nfunction resolveToken(styles: CSSStyleDeclaration, token: string, fallback: string): string {\n  const value: string = styles.getPropertyValue(token).trim();\n  return value === \"\" ? fallback : value;\n}\n\nexport function readChartTheme(element: HTMLElement): ChartTheme {\n  const styles: CSSStyleDeclaration = window.getComputedStyle(element);\n  return {\n    seriesColors: CHART_SERIES_COLOR_TOKENS.map((token: string) =>\n      resolveToken(styles, token, \"#4b5563\"),\n    ),\n    neutralColor: resolveToken(styles, NEUTRAL_COLOR_TOKEN, \"#9ca3af\"),\n    // A escala de borda deste tema vai do claro para o escuro: `tertiary` é a mais escura,\n    // não a mais suave. A grade fica na `default` para ficar atrás do dado, e o eixo na\n    // `secondary` para se separar da grade sem competir com as linhas.\n    axisLineColor: resolveToken(styles, \"--sds-color-border-default-secondary\", \"#9ca3af\"),\n    splitLineColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#e5e7eb\"),\n    labelColor: resolveToken(styles, \"--sds-color-text-default-secondary\", \"#6b7280\"),\n    tooltipBackgroundColor: resolveToken(\n      styles,\n      \"--sds-color-background-default-default\",\n      \"#ffffff\",\n    ),\n    tooltipBorderColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#d1d5db\"),\n    fontFamily: resolveToken(styles, \"--sds-typography-body-font-family\", \"inherit\"),\n  };\n}\n"],"names":["resolveColorToken","element","token","value","resolveToken","styles","fallback","readChartTheme","CHART_SERIES_COLOR_TOKENS","NEUTRAL_COLOR_TOKEN"],"mappings":"uHAgBO,SAASA,EAAkBC,EAAsBC,EAAmC,CACzF,MAAMC,EAAgB,OAAO,iBAAiBF,CAAO,EAAE,iBAAiBC,CAAK,EAAE,KAAA,EAC/E,OAAOC,IAAU,GAAK,OAAYA,CACpC,CAEA,SAASC,EAAaC,EAA6BH,EAAeI,EAA0B,CAC1F,MAAMH,EAAgBE,EAAO,iBAAiBH,CAAK,EAAE,KAAA,EACrD,OAAOC,IAAU,GAAKG,EAAWH,CACnC,CAEO,SAASI,EAAeN,EAAkC,CAC/D,MAAMI,EAA8B,OAAO,iBAAiBJ,CAAO,EACnE,MAAO,CACL,aAAcO,EAAAA,0BAA0B,IAAKN,GAC3CE,EAAaC,EAAQH,EAAO,SAAS,CAAA,EAEvC,aAAcE,EAAaC,EAAQI,EAAAA,0BAAqB,SAAS,EAIjE,cAAeL,EAAaC,EAAQ,uCAAwC,SAAS,EACrF,eAAgBD,EAAaC,EAAQ,qCAAsC,SAAS,EACpF,WAAYD,EAAaC,EAAQ,qCAAsC,SAAS,EAChF,uBAAwBD,EACtBC,EACA,yCACA,SAAA,EAEF,mBAAoBD,EAAaC,EAAQ,qCAAsC,SAAS,EACxF,WAAYD,EAAaC,EAAQ,oCAAqC,SAAS,CAAA,CAEnF"}
+{"version":3,"file":"chart-theme.cjs","sources":["../../../../../src/ui/components/charts/chart-theme.ts"],"sourcesContent":["import { CHART_SERIES_COLOR_TOKENS, CHART_NEUTRAL_COLOR_TOKEN as NEUTRAL_COLOR_TOKEN } from \"./chart-palette\";\n\nexport interface ChartTheme {\n  seriesColors: string[];\n  neutralColor: string;\n  axisLineColor: string;\n  splitLineColor: string;\n  labelColor: string;\n  emphasizedLabelColor: string;\n  trackColor: string;\n  tooltipBackgroundColor: string;\n  tooltipBorderColor: string;\n  fontFamily: string;\n}\n\n// O renderizador canvas não entende `var(--token)`, então a cor precisa chegar resolvida. A\n// resolução é contra o elemento hospedeiro para que tema aplicado em escopo menor que `:root`\n// continue valendo.\nexport function resolveColorToken(element: HTMLElement, token: string): string | undefined {\n  const value: string = window.getComputedStyle(element).getPropertyValue(token).trim();\n  return value === \"\" ? undefined : value;\n}\n\nfunction resolveToken(styles: CSSStyleDeclaration, token: string, fallback: string): string {\n  const value: string = styles.getPropertyValue(token).trim();\n  return value === \"\" ? fallback : value;\n}\n\nexport function readChartTheme(element: HTMLElement): ChartTheme {\n  const styles: CSSStyleDeclaration = window.getComputedStyle(element);\n  return {\n    seriesColors: CHART_SERIES_COLOR_TOKENS.map((token: string) =>\n      resolveToken(styles, token, \"#4b5563\"),\n    ),\n    neutralColor: resolveToken(styles, NEUTRAL_COLOR_TOKEN, \"#9ca3af\"),\n    // A escala de borda deste tema vai do claro para o escuro: `tertiary` é a mais escura,\n    // não a mais suave. A grade fica na `default` para ficar atrás do dado, e o eixo na\n    // `secondary` para se separar da grade sem competir com as linhas.\n    axisLineColor: resolveToken(styles, \"--sds-color-border-default-secondary\", \"#9ca3af\"),\n    splitLineColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#e5e7eb\"),\n    labelColor: resolveToken(styles, \"--sds-color-text-default-secondary\", \"#6b7280\"),\n    emphasizedLabelColor: resolveToken(styles, \"--sds-color-text-default-default\", \"#111827\"),\n    trackColor: resolveToken(styles, \"--sds-color-background-default-secondary\", \"#f3f4f6\"),\n    tooltipBackgroundColor: resolveToken(\n      styles,\n      \"--sds-color-background-default-default\",\n      \"#ffffff\",\n    ),\n    tooltipBorderColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#d1d5db\"),\n    fontFamily: resolveToken(styles, \"--sds-typography-body-font-family\", \"inherit\"),\n  };\n}\n"],"names":["resolveColorToken","element","token","value","resolveToken","styles","fallback","readChartTheme","CHART_SERIES_COLOR_TOKENS","NEUTRAL_COLOR_TOKEN"],"mappings":"uHAkBO,SAASA,EAAkBC,EAAsBC,EAAmC,CACzF,MAAMC,EAAgB,OAAO,iBAAiBF,CAAO,EAAE,iBAAiBC,CAAK,EAAE,KAAA,EAC/E,OAAOC,IAAU,GAAK,OAAYA,CACpC,CAEA,SAASC,EAAaC,EAA6BH,EAAeI,EAA0B,CAC1F,MAAMH,EAAgBE,EAAO,iBAAiBH,CAAK,EAAE,KAAA,EACrD,OAAOC,IAAU,GAAKG,EAAWH,CACnC,CAEO,SAASI,EAAeN,EAAkC,CAC/D,MAAMI,EAA8B,OAAO,iBAAiBJ,CAAO,EACnE,MAAO,CACL,aAAcO,EAAAA,0BAA0B,IAAKN,GAC3CE,EAAaC,EAAQH,EAAO,SAAS,CAAA,EAEvC,aAAcE,EAAaC,EAAQI,EAAAA,0BAAqB,SAAS,EAIjE,cAAeL,EAAaC,EAAQ,uCAAwC,SAAS,EACrF,eAAgBD,EAAaC,EAAQ,qCAAsC,SAAS,EACpF,WAAYD,EAAaC,EAAQ,qCAAsC,SAAS,EAChF,qBAAsBD,EAAaC,EAAQ,mCAAoC,SAAS,EACxF,WAAYD,EAAaC,EAAQ,2CAA4C,SAAS,EACtF,uBAAwBD,EACtBC,EACA,yCACA,SAAA,EAEF,mBAAoBD,EAAaC,EAAQ,qCAAsC,SAAS,EACxF,WAAYD,EAAaC,EAAQ,oCAAqC,SAAS,CAAA,CAEnF"}

package/dist/lib/ui/components/charts/chart-theme.js

@@ -1,5 +1,5 @@
 import { CHART_SERIES_COLOR_TOKENS as d, CHART_NEUTRAL_COLOR_TOKEN as a } from "./chart-palette.js";
-function s(t, o) {
+function f(t, o) {
   const r = window.getComputedStyle(t).getPropertyValue(o).trim();
   return r === "" ? void 0 : r;
 }
@@ -7,7 +7,7 @@ function e(t, o, r) {
   const l = t.getPropertyValue(o).trim();
   return l === "" ? r : l;
 }
-function f(t) {
+function n(t) {
   const o = window.getComputedStyle(t);
   return {
     seriesColors: d.map(
@@ -20,6 +20,8 @@ function f(t) {
     axisLineColor: e(o, "--sds-color-border-default-secondary", "#9ca3af"),
     splitLineColor: e(o, "--sds-color-border-default-default", "#e5e7eb"),
     labelColor: e(o, "--sds-color-text-default-secondary", "#6b7280"),
+    emphasizedLabelColor: e(o, "--sds-color-text-default-default", "#111827"),
+    trackColor: e(o, "--sds-color-background-default-secondary", "#f3f4f6"),
     tooltipBackgroundColor: e(
       o,
       "--sds-color-background-default-default",
@@ -30,7 +32,7 @@ function f(t) {
   };
 }
 export {
-  f as readChartTheme,
-  s as resolveColorToken
+  n as readChartTheme,
+  f as resolveColorToken
 };
 //# sourceMappingURL=chart-theme.js.map

package/dist/lib/ui/components/charts/chart-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-theme.js","sources":["../../../../../src/ui/components/charts/chart-theme.ts"],"sourcesContent":["import { CHART_SERIES_COLOR_TOKENS, CHART_NEUTRAL_COLOR_TOKEN as NEUTRAL_COLOR_TOKEN } from \"./chart-palette\";\n\nexport interface ChartTheme {\n  seriesColors: string[];\n  neutralColor: string;\n  axisLineColor: string;\n  splitLineColor: string;\n  labelColor: string;\n  tooltipBackgroundColor: string;\n  tooltipBorderColor: string;\n  fontFamily: string;\n}\n\n// O renderizador canvas não entende `var(--token)`, então a cor precisa chegar resolvida. A\n// resolução é contra o elemento hospedeiro para que tema aplicado em escopo menor que `:root`\n// continue valendo.\nexport function resolveColorToken(element: HTMLElement, token: string): string | undefined {\n  const value: string = window.getComputedStyle(element).getPropertyValue(token).trim();\n  return value === \"\" ? undefined : value;\n}\n\nfunction resolveToken(styles: CSSStyleDeclaration, token: string, fallback: string): string {\n  const value: string = styles.getPropertyValue(token).trim();\n  return value === \"\" ? fallback : value;\n}\n\nexport function readChartTheme(element: HTMLElement): ChartTheme {\n  const styles: CSSStyleDeclaration = window.getComputedStyle(element);\n  return {\n    seriesColors: CHART_SERIES_COLOR_TOKENS.map((token: string) =>\n      resolveToken(styles, token, \"#4b5563\"),\n    ),\n    neutralColor: resolveToken(styles, NEUTRAL_COLOR_TOKEN, \"#9ca3af\"),\n    // A escala de borda deste tema vai do claro para o escuro: `tertiary` é a mais escura,\n    // não a mais suave. A grade fica na `default` para ficar atrás do dado, e o eixo na\n    // `secondary` para se separar da grade sem competir com as linhas.\n    axisLineColor: resolveToken(styles, \"--sds-color-border-default-secondary\", \"#9ca3af\"),\n    splitLineColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#e5e7eb\"),\n    labelColor: resolveToken(styles, \"--sds-color-text-default-secondary\", \"#6b7280\"),\n    tooltipBackgroundColor: resolveToken(\n      styles,\n      \"--sds-color-background-default-default\",\n      \"#ffffff\",\n    ),\n    tooltipBorderColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#d1d5db\"),\n    fontFamily: resolveToken(styles, \"--sds-typography-body-font-family\", \"inherit\"),\n  };\n}\n"],"names":["resolveColorToken","element","token","value","resolveToken","styles","fallback","readChartTheme","CHART_SERIES_COLOR_TOKENS","NEUTRAL_COLOR_TOKEN"],"mappings":";AAgBO,SAASA,EAAkBC,GAAsBC,GAAmC;AACzF,QAAMC,IAAgB,OAAO,iBAAiBF,CAAO,EAAE,iBAAiBC,CAAK,EAAE,KAAA;AAC/E,SAAOC,MAAU,KAAK,SAAYA;AACpC;AAEA,SAASC,EAAaC,GAA6BH,GAAeI,GAA0B;AAC1F,QAAMH,IAAgBE,EAAO,iBAAiBH,CAAK,EAAE,KAAA;AACrD,SAAOC,MAAU,KAAKG,IAAWH;AACnC;AAEO,SAASI,EAAeN,GAAkC;AAC/D,QAAMI,IAA8B,OAAO,iBAAiBJ,CAAO;AACnE,SAAO;AAAA,IACL,cAAcO,EAA0B;AAAA,MAAI,CAACN,MAC3CE,EAAaC,GAAQH,GAAO,SAAS;AAAA,IAAA;AAAA,IAEvC,cAAcE,EAAaC,GAAQI,GAAqB,SAAS;AAAA;AAAA;AAAA;AAAA,IAIjE,eAAeL,EAAaC,GAAQ,wCAAwC,SAAS;AAAA,IACrF,gBAAgBD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IACpF,YAAYD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IAChF,wBAAwBD;AAAA,MACtBC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,oBAAoBD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IACxF,YAAYD,EAAaC,GAAQ,qCAAqC,SAAS;AAAA,EAAA;AAEnF;"}
+{"version":3,"file":"chart-theme.js","sources":["../../../../../src/ui/components/charts/chart-theme.ts"],"sourcesContent":["import { CHART_SERIES_COLOR_TOKENS, CHART_NEUTRAL_COLOR_TOKEN as NEUTRAL_COLOR_TOKEN } from \"./chart-palette\";\n\nexport interface ChartTheme {\n  seriesColors: string[];\n  neutralColor: string;\n  axisLineColor: string;\n  splitLineColor: string;\n  labelColor: string;\n  emphasizedLabelColor: string;\n  trackColor: string;\n  tooltipBackgroundColor: string;\n  tooltipBorderColor: string;\n  fontFamily: string;\n}\n\n// O renderizador canvas não entende `var(--token)`, então a cor precisa chegar resolvida. A\n// resolução é contra o elemento hospedeiro para que tema aplicado em escopo menor que `:root`\n// continue valendo.\nexport function resolveColorToken(element: HTMLElement, token: string): string | undefined {\n  const value: string = window.getComputedStyle(element).getPropertyValue(token).trim();\n  return value === \"\" ? undefined : value;\n}\n\nfunction resolveToken(styles: CSSStyleDeclaration, token: string, fallback: string): string {\n  const value: string = styles.getPropertyValue(token).trim();\n  return value === \"\" ? fallback : value;\n}\n\nexport function readChartTheme(element: HTMLElement): ChartTheme {\n  const styles: CSSStyleDeclaration = window.getComputedStyle(element);\n  return {\n    seriesColors: CHART_SERIES_COLOR_TOKENS.map((token: string) =>\n      resolveToken(styles, token, \"#4b5563\"),\n    ),\n    neutralColor: resolveToken(styles, NEUTRAL_COLOR_TOKEN, \"#9ca3af\"),\n    // A escala de borda deste tema vai do claro para o escuro: `tertiary` é a mais escura,\n    // não a mais suave. A grade fica na `default` para ficar atrás do dado, e o eixo na\n    // `secondary` para se separar da grade sem competir com as linhas.\n    axisLineColor: resolveToken(styles, \"--sds-color-border-default-secondary\", \"#9ca3af\"),\n    splitLineColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#e5e7eb\"),\n    labelColor: resolveToken(styles, \"--sds-color-text-default-secondary\", \"#6b7280\"),\n    emphasizedLabelColor: resolveToken(styles, \"--sds-color-text-default-default\", \"#111827\"),\n    trackColor: resolveToken(styles, \"--sds-color-background-default-secondary\", \"#f3f4f6\"),\n    tooltipBackgroundColor: resolveToken(\n      styles,\n      \"--sds-color-background-default-default\",\n      \"#ffffff\",\n    ),\n    tooltipBorderColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#d1d5db\"),\n    fontFamily: resolveToken(styles, \"--sds-typography-body-font-family\", \"inherit\"),\n  };\n}\n"],"names":["resolveColorToken","element","token","value","resolveToken","styles","fallback","readChartTheme","CHART_SERIES_COLOR_TOKENS","NEUTRAL_COLOR_TOKEN"],"mappings":";AAkBO,SAASA,EAAkBC,GAAsBC,GAAmC;AACzF,QAAMC,IAAgB,OAAO,iBAAiBF,CAAO,EAAE,iBAAiBC,CAAK,EAAE,KAAA;AAC/E,SAAOC,MAAU,KAAK,SAAYA;AACpC;AAEA,SAASC,EAAaC,GAA6BH,GAAeI,GAA0B;AAC1F,QAAMH,IAAgBE,EAAO,iBAAiBH,CAAK,EAAE,KAAA;AACrD,SAAOC,MAAU,KAAKG,IAAWH;AACnC;AAEO,SAASI,EAAeN,GAAkC;AAC/D,QAAMI,IAA8B,OAAO,iBAAiBJ,CAAO;AACnE,SAAO;AAAA,IACL,cAAcO,EAA0B;AAAA,MAAI,CAACN,MAC3CE,EAAaC,GAAQH,GAAO,SAAS;AAAA,IAAA;AAAA,IAEvC,cAAcE,EAAaC,GAAQI,GAAqB,SAAS;AAAA;AAAA;AAAA;AAAA,IAIjE,eAAeL,EAAaC,GAAQ,wCAAwC,SAAS;AAAA,IACrF,gBAAgBD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IACpF,YAAYD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IAChF,sBAAsBD,EAAaC,GAAQ,oCAAoC,SAAS;AAAA,IACxF,YAAYD,EAAaC,GAAQ,4CAA4C,SAAS;AAAA,IACtF,wBAAwBD;AAAA,MACtBC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,oBAAoBD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IACxF,YAAYD,EAAaC,GAAQ,qCAAqC,SAAS;AAAA,EAAA;AAEnF;"}

package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("@codemirror/view"),d=require("@codemirror/lang-json"),g=require("@codemirror/language"),t=require("@lezer/highlight"),u=g.HighlightStyle.define([{tag:t.tags.propertyName,color:"var(--json-viewer-color-key)"},{tag:t.tags.string,color:"var(--json-viewer-color-string)",fontWeight:600},{tag:[t.tags.number,t.tags.bool,t.tags.null],color:"var(--json-viewer-color-scalar)"},{tag:[t.tags.separator,t.tags.squareBracket,t.tags.brace],color:"var(--json-viewer-color-punctuation)"}]),p=f.EditorView.theme({"&":{backgroundColor:"transparent",color:"var(--json-viewer-color-punctuation)",fontSize:"13px"},"&.cm-focused":{outline:"none"},".cm-content":{fontFamily:"var(--sds-typography-family-mono)",padding:"8px 124px 12px 4px"},".cm-gutters":{backgroundColor:"transparent",border:"none",color:"var(--json-viewer-color-caret)",paddingLeft:"5px"},".cm-scroller":{overflow:"auto"}}),h=[d.json(),g.foldGutter(),g.syntaxHighlighting(u)];function v(e){try{return JSON.stringify(e,null,2)??"null"}catch{return String(e)}}function a(e){return typeof e=="number"?`${e}px`:e}function j({height:e,minHeight:r,maxHeight:i}){const o={};return e!==void 0&&(o["--json-viewer-height"]=a(e)),r!==void 0&&(o["--json-viewer-min-height"]=a(r)),i!==void 0&&(o["--json-viewer-max-height"]=a(i)),o}function m(e){const r=[],i=e.length;let o=0;for(;o<i&&e[o]!=="{"&&e[o]!=="[";)o++;if(o>=i)return r;let s=0,c=!1,l=-1;for(;o<i;o++){const n=e[o];if(c){n==="\\"?o++:n==='"'&&(c=!1);continue}if(n==='"'){c=!0;continue}if(n==="{"||n==="["){s++,s===2&&(l=o+1);continue}(n==="}"||n==="]")&&(s===2&&l!==-1&&(r.push({from:l,to:o}),l=-1),s--)}return r}exports.computeFirstLevelFoldRanges=m;exports.jsonEditorExtensions=h;exports.jsonEditorTheme=p;exports.jsonHighlightStyle=u;exports.serializeJson=v;exports.toCssSize=a;exports.toEditorSizeStyle=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("@codemirror/view"),d=require("@codemirror/lang-json"),g=require("@codemirror/language"),t=require("@lezer/highlight"),u=g.HighlightStyle.define([{tag:t.tags.propertyName,color:"var(--json-viewer-color-key)"},{tag:t.tags.string,color:"var(--json-viewer-color-string)",fontWeight:600},{tag:[t.tags.number,t.tags.bool,t.tags.null],color:"var(--json-viewer-color-scalar)"},{tag:[t.tags.separator,t.tags.squareBracket,t.tags.brace],color:"var(--json-viewer-color-punctuation)"}]),p=f.EditorView.theme({"&":{backgroundColor:"transparent",color:"var(--json-viewer-color-punctuation)",fontSize:"13px"},"&.cm-focused":{outline:"none"},".cm-content":{fontFamily:"var(--sds-typography-family-mono)",padding:"8px 124px 12px 4px"},".cm-gutters":{backgroundColor:"transparent",border:"none",color:"var(--json-viewer-color-caret)",paddingLeft:"5px"},".cm-scroller":{overflow:"auto"}}),h=[d.json(),g.foldGutter(),g.syntaxHighlighting(u)];function v(e){try{return JSON.stringify(e,null,2)??"null"}catch{return String(e)}}function a(e){return typeof e=="number"?`${e}px`:e}function m({height:e,minHeight:r,maxHeight:i}){const o={};return e!==void 0&&(o["--json-viewer-height"]=a(e)),r!==void 0&&(o["--json-viewer-min-height"]=a(r)),i!==void 0&&(o["--json-viewer-max-height"]=a(i)),o}function y(e){const r=[],i=e.length;let o=0;for(;o<i&&e[o]!=="{"&&e[o]!=="[";)o++;if(o>=i)return r;let l=0,c=!1,s=-1;for(;o<i;o++){const n=e[o];if(c){n==="\\"?o++:n==='"'&&(c=!1);continue}if(n==='"'){c=!0;continue}if(n==="{"||n==="["){l++,l===2&&(s=o+1);continue}(n==="}"||n==="]")&&(l===2&&s!==-1&&(o===s||r.push({from:s,to:o}),s=-1),l--)}return r}exports.computeFirstLevelFoldRanges=y;exports.jsonEditorExtensions=h;exports.jsonEditorTheme=p;exports.jsonHighlightStyle=u;exports.serializeJson=v;exports.toCssSize=a;exports.toEditorSizeStyle=m;
 //# sourceMappingURL=json-code-mirror.cjs.map

package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"json-code-mirror.cjs","sources":["../../../../../src/ui/primitives/JsonViewer/json-code-mirror.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { EditorView } from \"@codemirror/view\";\nimport { json } from \"@codemirror/lang-json\";\nimport { foldGutter, HighlightStyle, syntaxHighlighting } from \"@codemirror/language\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const jsonHighlightStyle = HighlightStyle.define([\n  { tag: t.propertyName, color: \"var(--json-viewer-color-key)\" },\n  { tag: t.string, color: \"var(--json-viewer-color-string)\", fontWeight: 600 },\n  { tag: [t.number, t.bool, t.null], color: \"var(--json-viewer-color-scalar)\" },\n  { tag: [t.separator, t.squareBracket, t.brace], color: \"var(--json-viewer-color-punctuation)\" },\n]);\n\nexport const jsonEditorTheme = EditorView.theme({\n  \"&\": { backgroundColor: \"transparent\", color: \"var(--json-viewer-color-punctuation)\", fontSize: \"13px\" },\n  \"&.cm-focused\": { outline: \"none\" },\n  \".cm-content\": { fontFamily: \"var(--sds-typography-family-mono)\", padding: \"8px 124px 12px 4px\" },\n  \".cm-gutters\": {\n    backgroundColor: \"transparent\",\n    border: \"none\",\n    color: \"var(--json-viewer-color-caret)\",\n    paddingLeft: \"5px\",\n  },\n  \".cm-scroller\": { overflow: \"auto\" },\n});\n\nexport const jsonEditorExtensions = [json(), foldGutter(), syntaxHighlighting(jsonHighlightStyle)];\n\nexport function serializeJson(value: unknown): string {\n  try {\n    return JSON.stringify(value, null, 2) ?? \"null\";\n  } catch {\n    return String(value);\n  }\n}\n\nexport function toCssSize(size: string | number): string {\n  return typeof size === \"number\" ? `${size}px` : size;\n}\n\nexport interface JsonEditorSize {\n  height?: string | number;\n  minHeight?: string | number;\n  maxHeight?: string | number;\n}\n\nexport function toEditorSizeStyle({ height, minHeight, maxHeight }: JsonEditorSize): CSSProperties {\n  const sizeVariables: Record<string, string> = {};\n  if (height !== undefined) sizeVariables[\"--json-viewer-height\"] = toCssSize(height);\n  if (minHeight !== undefined) sizeVariables[\"--json-viewer-min-height\"] = toCssSize(minHeight);\n  if (maxHeight !== undefined) sizeVariables[\"--json-viewer-max-height\"] = toCssSize(maxHeight);\n  return sizeVariables as CSSProperties;\n}\n\n/**\n * Finds the fold range of every direct child (depth 1) of the root object/array\n * by scanning the text itself for matching brackets. This mirrors what\n * CodeMirror's `foldable()` would compute, but doesn't depend on the lezer\n * parser having finished tokenizing the document — which for a multi-MB\n * document is not guaranteed synchronously at mount time.\n */\nexport function computeFirstLevelFoldRanges(text: string): { from: number; to: number }[] {\n  const ranges: { from: number; to: number }[] = [];\n  const n = text.length;\n  let i = 0;\n  while (i < n && text[i] !== \"{\" && text[i] !== \"[\") i++;\n  if (i >= n) return ranges;\n\n  let depth = 0;\n  let inString = false;\n  let pendingStart = -1;\n  for (; i < n; i++) {\n    const ch = text[i];\n    if (inString) {\n      if (ch === \"\\\\\") i++;\n      else if (ch === '\"') inString = false;\n      continue;\n    }\n    if (ch === '\"') {\n      inString = true;\n      continue;\n    }\n    if (ch === \"{\" || ch === \"[\") {\n      depth++;\n      if (depth === 2) pendingStart = i + 1;\n      continue;\n    }\n    if (ch === \"}\" || ch === \"]\") {\n      if (depth === 2 && pendingStart !== -1) {\n        ranges.push({ from: pendingStart, to: i });\n        pendingStart = -1;\n      }\n      depth--;\n    }\n  }\n  return ranges;\n}\n"],"names":["jsonHighlightStyle","HighlightStyle","t","jsonEditorTheme","EditorView","jsonEditorExtensions","json","foldGutter","syntaxHighlighting","serializeJson","value","toCssSize","size","toEditorSizeStyle","height","minHeight","maxHeight","sizeVariables","computeFirstLevelFoldRanges","text","ranges","n","i","depth","inString","pendingStart","ch"],"mappings":"uNAMaA,EAAqBC,EAAAA,eAAe,OAAO,CACtD,CAAE,IAAKC,EAAAA,KAAE,aAAc,MAAO,8BAAA,EAC9B,CAAE,IAAKA,EAAAA,KAAE,OAAQ,MAAO,kCAAmC,WAAY,GAAA,EACvE,CAAE,IAAK,CAACA,OAAE,OAAQA,EAAAA,KAAE,KAAMA,EAAAA,KAAE,IAAI,EAAG,MAAO,iCAAA,EAC1C,CAAE,IAAK,CAACA,EAAAA,KAAE,UAAWA,EAAAA,KAAE,cAAeA,OAAE,KAAK,EAAG,MAAO,sCAAA,CACzD,CAAC,EAEYC,EAAkBC,EAAAA,WAAW,MAAM,CAC9C,IAAK,CAAE,gBAAiB,cAAe,MAAO,uCAAwC,SAAU,MAAA,EAChG,eAAgB,CAAE,QAAS,MAAA,EAC3B,cAAe,CAAE,WAAY,oCAAqC,QAAS,oBAAA,EAC3E,cAAe,CACb,gBAAiB,cACjB,OAAQ,OACR,MAAO,iCACP,YAAa,KAAA,EAEf,eAAgB,CAAE,SAAU,MAAA,CAC9B,CAAC,EAEYC,EAAuB,CAACC,EAAAA,KAAA,EAAQC,EAAAA,aAAcC,EAAAA,mBAAmBR,CAAkB,CAAC,EAE1F,SAASS,EAAcC,EAAwB,CACpD,GAAI,CACF,OAAO,KAAK,UAAUA,EAAO,KAAM,CAAC,GAAK,MAC3C,MAAQ,CACN,OAAO,OAAOA,CAAK,CACrB,CACF,CAEO,SAASC,EAAUC,EAA+B,CACvD,OAAO,OAAOA,GAAS,SAAW,GAAGA,CAAI,KAAOA,CAClD,CAQO,SAASC,EAAkB,CAAE,OAAAC,EAAQ,UAAAC,EAAW,UAAAC,GAA4C,CACjG,MAAMC,EAAwC,CAAA,EAC9C,OAAIH,IAAW,SAAWG,EAAc,sBAAsB,EAAIN,EAAUG,CAAM,GAC9EC,IAAc,SAAWE,EAAc,0BAA0B,EAAIN,EAAUI,CAAS,GACxFC,IAAc,SAAWC,EAAc,0BAA0B,EAAIN,EAAUK,CAAS,GACrFC,CACT,CASO,SAASC,EAA4BC,EAA8C,CACxF,MAAMC,EAAyC,CAAA,EACzCC,EAAIF,EAAK,OACf,IAAIG,EAAI,EACR,KAAOA,EAAID,GAAKF,EAAKG,CAAC,IAAM,KAAOH,EAAKG,CAAC,IAAM,KAAKA,IACpD,GAAIA,GAAKD,EAAG,OAAOD,EAEnB,IAAIG,EAAQ,EACRC,EAAW,GACXC,EAAe,GACnB,KAAOH,EAAID,EAAGC,IAAK,CACjB,MAAMI,EAAKP,EAAKG,CAAC,EACjB,GAAIE,EAAU,CACRE,IAAO,KAAMJ,IACRI,IAAO,MAAKF,EAAW,IAChC,QACF,CACA,GAAIE,IAAO,IAAK,CACdF,EAAW,GACX,QACF,CACA,GAAIE,IAAO,KAAOA,IAAO,IAAK,CAC5BH,IACIA,IAAU,IAAGE,EAAeH,EAAI,GACpC,QACF,EACII,IAAO,KAAOA,IAAO,OACnBH,IAAU,GAAKE,IAAiB,KAClCL,EAAO,KAAK,CAAE,KAAMK,EAAc,GAAIH,EAAG,EACzCG,EAAe,IAEjBF,IAEJ,CACA,OAAOH,CACT"}
+{"version":3,"file":"json-code-mirror.cjs","sources":["../../../../../src/ui/primitives/JsonViewer/json-code-mirror.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { EditorView } from \"@codemirror/view\";\nimport { json } from \"@codemirror/lang-json\";\nimport { foldGutter, HighlightStyle, syntaxHighlighting } from \"@codemirror/language\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const jsonHighlightStyle = HighlightStyle.define([\n  { tag: t.propertyName, color: \"var(--json-viewer-color-key)\" },\n  { tag: t.string, color: \"var(--json-viewer-color-string)\", fontWeight: 600 },\n  { tag: [t.number, t.bool, t.null], color: \"var(--json-viewer-color-scalar)\" },\n  { tag: [t.separator, t.squareBracket, t.brace], color: \"var(--json-viewer-color-punctuation)\" },\n]);\n\nexport const jsonEditorTheme = EditorView.theme({\n  \"&\": { backgroundColor: \"transparent\", color: \"var(--json-viewer-color-punctuation)\", fontSize: \"13px\" },\n  \"&.cm-focused\": { outline: \"none\" },\n  \".cm-content\": { fontFamily: \"var(--sds-typography-family-mono)\", padding: \"8px 124px 12px 4px\" },\n  \".cm-gutters\": {\n    backgroundColor: \"transparent\",\n    border: \"none\",\n    color: \"var(--json-viewer-color-caret)\",\n    paddingLeft: \"5px\",\n  },\n  \".cm-scroller\": { overflow: \"auto\" },\n});\n\nexport const jsonEditorExtensions = [json(), foldGutter(), syntaxHighlighting(jsonHighlightStyle)];\n\nexport function serializeJson(value: unknown): string {\n  try {\n    return JSON.stringify(value, null, 2) ?? \"null\";\n  } catch {\n    return String(value);\n  }\n}\n\nexport function toCssSize(size: string | number): string {\n  return typeof size === \"number\" ? `${size}px` : size;\n}\n\nexport interface JsonEditorSize {\n  height?: string | number;\n  minHeight?: string | number;\n  maxHeight?: string | number;\n}\n\nexport function toEditorSizeStyle({ height, minHeight, maxHeight }: JsonEditorSize): CSSProperties {\n  const sizeVariables: Record<string, string> = {};\n  if (height !== undefined) sizeVariables[\"--json-viewer-height\"] = toCssSize(height);\n  if (minHeight !== undefined) sizeVariables[\"--json-viewer-min-height\"] = toCssSize(minHeight);\n  if (maxHeight !== undefined) sizeVariables[\"--json-viewer-max-height\"] = toCssSize(maxHeight);\n  return sizeVariables as CSSProperties;\n}\n\n/**\n * Finds the fold range of every direct child (depth 1) of the root object/array\n * by scanning the text itself for matching brackets. This mirrors what\n * CodeMirror's `foldable()` would compute, but doesn't depend on the lezer\n * parser having finished tokenizing the document — which for a multi-MB\n * document is not guaranteed synchronously at mount time.\n */\nexport function computeFirstLevelFoldRanges(text: string): { from: number; to: number }[] {\n  const ranges: { from: number; to: number }[] = [];\n  const n = text.length;\n  let i = 0;\n  while (i < n && text[i] !== \"{\" && text[i] !== \"[\") i++;\n  if (i >= n) return ranges;\n\n  let depth = 0;\n  let inString = false;\n  let pendingStart = -1;\n  for (; i < n; i++) {\n    const ch = text[i];\n    if (inString) {\n      if (ch === \"\\\\\") i++;\n      else if (ch === '\"') inString = false;\n      continue;\n    }\n    if (ch === '\"') {\n      inString = true;\n      continue;\n    }\n    if (ch === \"{\" || ch === \"[\") {\n      depth++;\n      if (depth === 2) pendingStart = i + 1;\n      continue;\n    }\n    if (ch === \"}\" || ch === \"]\") {\n      if (depth === 2 && pendingStart !== -1) {\n        const isEmptyBlock = i === pendingStart;\n        if (!isEmptyBlock) ranges.push({ from: pendingStart, to: i });\n        pendingStart = -1;\n      }\n      depth--;\n    }\n  }\n  return ranges;\n}\n"],"names":["jsonHighlightStyle","HighlightStyle","t","jsonEditorTheme","EditorView","jsonEditorExtensions","json","foldGutter","syntaxHighlighting","serializeJson","value","toCssSize","size","toEditorSizeStyle","height","minHeight","maxHeight","sizeVariables","computeFirstLevelFoldRanges","text","ranges","n","i","depth","inString","pendingStart","ch"],"mappings":"uNAMaA,EAAqBC,EAAAA,eAAe,OAAO,CACtD,CAAE,IAAKC,EAAAA,KAAE,aAAc,MAAO,8BAAA,EAC9B,CAAE,IAAKA,EAAAA,KAAE,OAAQ,MAAO,kCAAmC,WAAY,GAAA,EACvE,CAAE,IAAK,CAACA,OAAE,OAAQA,EAAAA,KAAE,KAAMA,EAAAA,KAAE,IAAI,EAAG,MAAO,iCAAA,EAC1C,CAAE,IAAK,CAACA,EAAAA,KAAE,UAAWA,EAAAA,KAAE,cAAeA,OAAE,KAAK,EAAG,MAAO,sCAAA,CACzD,CAAC,EAEYC,EAAkBC,EAAAA,WAAW,MAAM,CAC9C,IAAK,CAAE,gBAAiB,cAAe,MAAO,uCAAwC,SAAU,MAAA,EAChG,eAAgB,CAAE,QAAS,MAAA,EAC3B,cAAe,CAAE,WAAY,oCAAqC,QAAS,oBAAA,EAC3E,cAAe,CACb,gBAAiB,cACjB,OAAQ,OACR,MAAO,iCACP,YAAa,KAAA,EAEf,eAAgB,CAAE,SAAU,MAAA,CAC9B,CAAC,EAEYC,EAAuB,CAACC,EAAAA,KAAA,EAAQC,EAAAA,aAAcC,EAAAA,mBAAmBR,CAAkB,CAAC,EAE1F,SAASS,EAAcC,EAAwB,CACpD,GAAI,CACF,OAAO,KAAK,UAAUA,EAAO,KAAM,CAAC,GAAK,MAC3C,MAAQ,CACN,OAAO,OAAOA,CAAK,CACrB,CACF,CAEO,SAASC,EAAUC,EAA+B,CACvD,OAAO,OAAOA,GAAS,SAAW,GAAGA,CAAI,KAAOA,CAClD,CAQO,SAASC,EAAkB,CAAE,OAAAC,EAAQ,UAAAC,EAAW,UAAAC,GAA4C,CACjG,MAAMC,EAAwC,CAAA,EAC9C,OAAIH,IAAW,SAAWG,EAAc,sBAAsB,EAAIN,EAAUG,CAAM,GAC9EC,IAAc,SAAWE,EAAc,0BAA0B,EAAIN,EAAUI,CAAS,GACxFC,IAAc,SAAWC,EAAc,0BAA0B,EAAIN,EAAUK,CAAS,GACrFC,CACT,CASO,SAASC,EAA4BC,EAA8C,CACxF,MAAMC,EAAyC,CAAA,EACzCC,EAAIF,EAAK,OACf,IAAIG,EAAI,EACR,KAAOA,EAAID,GAAKF,EAAKG,CAAC,IAAM,KAAOH,EAAKG,CAAC,IAAM,KAAKA,IACpD,GAAIA,GAAKD,EAAG,OAAOD,EAEnB,IAAIG,EAAQ,EACRC,EAAW,GACXC,EAAe,GACnB,KAAOH,EAAID,EAAGC,IAAK,CACjB,MAAMI,EAAKP,EAAKG,CAAC,EACjB,GAAIE,EAAU,CACRE,IAAO,KAAMJ,IACRI,IAAO,MAAKF,EAAW,IAChC,QACF,CACA,GAAIE,IAAO,IAAK,CACdF,EAAW,GACX,QACF,CACA,GAAIE,IAAO,KAAOA,IAAO,IAAK,CAC5BH,IACIA,IAAU,IAAGE,EAAeH,EAAI,GACpC,QACF,EACII,IAAO,KAAOA,IAAO,OACnBH,IAAU,GAAKE,IAAiB,KACbH,IAAMG,GACRL,EAAO,KAAK,CAAE,KAAMK,EAAc,GAAIH,EAAG,EAC5DG,EAAe,IAEjBF,IAEJ,CACA,OAAOH,CACT"}

package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.js

@@ -1,13 +1,13 @@
 import { EditorView as f } from "@codemirror/view";
 import { json as u } from "@codemirror/lang-json";
-import { foldGutter as g, syntaxHighlighting as p, HighlightStyle as m } from "@codemirror/language";
-import { tags as n } from "@lezer/highlight";
+import { foldGutter as p, syntaxHighlighting as g, HighlightStyle as m } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
 const d = m.define([
-  { tag: n.propertyName, color: "var(--json-viewer-color-key)" },
-  { tag: n.string, color: "var(--json-viewer-color-string)", fontWeight: 600 },
-  { tag: [n.number, n.bool, n.null], color: "var(--json-viewer-color-scalar)" },
-  { tag: [n.separator, n.squareBracket, n.brace], color: "var(--json-viewer-color-punctuation)" }
-]), w = f.theme({
+  { tag: t.propertyName, color: "var(--json-viewer-color-key)" },
+  { tag: t.string, color: "var(--json-viewer-color-string)", fontWeight: 600 },
+  { tag: [t.number, t.bool, t.null], color: "var(--json-viewer-color-scalar)" },
+  { tag: [t.separator, t.squareBracket, t.brace], color: "var(--json-viewer-color-punctuation)" }
+]), S = f.theme({
   "&": { backgroundColor: "transparent", color: "var(--json-viewer-color-punctuation)", fontSize: "13px" },
   "&.cm-focused": { outline: "none" },
   ".cm-content": { fontFamily: "var(--sds-typography-family-mono)", padding: "8px 124px 12px 4px" },
@@ -18,8 +18,8 @@ const d = m.define([
     paddingLeft: "5px"
   },
   ".cm-scroller": { overflow: "auto" }
-}), S = [u(), g(), p(d)];
-function b(r) {
+}), b = [u(), p(), g(d)];
+function x(r) {
   try {
     return JSON.stringify(r, null, 2) ?? "null";
   } catch {
@@ -29,41 +29,41 @@ function b(r) {
 function a(r) {
   return typeof r == "number" ? `${r}px` : r;
 }
-function x({ height: r, minHeight: e, maxHeight: i }) {
+function E({ height: r, minHeight: e, maxHeight: i }) {
   const o = {};
   return r !== void 0 && (o["--json-viewer-height"] = a(r)), e !== void 0 && (o["--json-viewer-min-height"] = a(e)), i !== void 0 && (o["--json-viewer-max-height"] = a(i)), o;
 }
-function E(r) {
+function k(r) {
   const e = [], i = r.length;
   let o = 0;
   for (; o < i && r[o] !== "{" && r[o] !== "["; ) o++;
   if (o >= i) return e;
-  let s = 0, c = !1, l = -1;
+  let l = 0, c = !1, s = -1;
   for (; o < i; o++) {
-    const t = r[o];
+    const n = r[o];
     if (c) {
-      t === "\\" ? o++ : t === '"' && (c = !1);
+      n === "\\" ? o++ : n === '"' && (c = !1);
       continue;
     }
-    if (t === '"') {
+    if (n === '"') {
       c = !0;
       continue;
     }
-    if (t === "{" || t === "[") {
-      s++, s === 2 && (l = o + 1);
+    if (n === "{" || n === "[") {
+      l++, l === 2 && (s = o + 1);
       continue;
     }
-    (t === "}" || t === "]") && (s === 2 && l !== -1 && (e.push({ from: l, to: o }), l = -1), s--);
+    (n === "}" || n === "]") && (l === 2 && s !== -1 && (o === s || e.push({ from: s, to: o }), s = -1), l--);
   }
   return e;
 }
 export {
-  E as computeFirstLevelFoldRanges,
-  S as jsonEditorExtensions,
-  w as jsonEditorTheme,
+  k as computeFirstLevelFoldRanges,
+  b as jsonEditorExtensions,
+  S as jsonEditorTheme,
   d as jsonHighlightStyle,
-  b as serializeJson,
+  x as serializeJson,
   a as toCssSize,
-  x as toEditorSizeStyle
+  E as toEditorSizeStyle
 };
 //# sourceMappingURL=json-code-mirror.js.map

package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.js.map

@@ -1 +1 @@
-{"version":3,"file":"json-code-mirror.js","sources":["../../../../../src/ui/primitives/JsonViewer/json-code-mirror.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { EditorView } from \"@codemirror/view\";\nimport { json } from \"@codemirror/lang-json\";\nimport { foldGutter, HighlightStyle, syntaxHighlighting } from \"@codemirror/language\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const jsonHighlightStyle = HighlightStyle.define([\n  { tag: t.propertyName, color: \"var(--json-viewer-color-key)\" },\n  { tag: t.string, color: \"var(--json-viewer-color-string)\", fontWeight: 600 },\n  { tag: [t.number, t.bool, t.null], color: \"var(--json-viewer-color-scalar)\" },\n  { tag: [t.separator, t.squareBracket, t.brace], color: \"var(--json-viewer-color-punctuation)\" },\n]);\n\nexport const jsonEditorTheme = EditorView.theme({\n  \"&\": { backgroundColor: \"transparent\", color: \"var(--json-viewer-color-punctuation)\", fontSize: \"13px\" },\n  \"&.cm-focused\": { outline: \"none\" },\n  \".cm-content\": { fontFamily: \"var(--sds-typography-family-mono)\", padding: \"8px 124px 12px 4px\" },\n  \".cm-gutters\": {\n    backgroundColor: \"transparent\",\n    border: \"none\",\n    color: \"var(--json-viewer-color-caret)\",\n    paddingLeft: \"5px\",\n  },\n  \".cm-scroller\": { overflow: \"auto\" },\n});\n\nexport const jsonEditorExtensions = [json(), foldGutter(), syntaxHighlighting(jsonHighlightStyle)];\n\nexport function serializeJson(value: unknown): string {\n  try {\n    return JSON.stringify(value, null, 2) ?? \"null\";\n  } catch {\n    return String(value);\n  }\n}\n\nexport function toCssSize(size: string | number): string {\n  return typeof size === \"number\" ? `${size}px` : size;\n}\n\nexport interface JsonEditorSize {\n  height?: string | number;\n  minHeight?: string | number;\n  maxHeight?: string | number;\n}\n\nexport function toEditorSizeStyle({ height, minHeight, maxHeight }: JsonEditorSize): CSSProperties {\n  const sizeVariables: Record<string, string> = {};\n  if (height !== undefined) sizeVariables[\"--json-viewer-height\"] = toCssSize(height);\n  if (minHeight !== undefined) sizeVariables[\"--json-viewer-min-height\"] = toCssSize(minHeight);\n  if (maxHeight !== undefined) sizeVariables[\"--json-viewer-max-height\"] = toCssSize(maxHeight);\n  return sizeVariables as CSSProperties;\n}\n\n/**\n * Finds the fold range of every direct child (depth 1) of the root object/array\n * by scanning the text itself for matching brackets. This mirrors what\n * CodeMirror's `foldable()` would compute, but doesn't depend on the lezer\n * parser having finished tokenizing the document — which for a multi-MB\n * document is not guaranteed synchronously at mount time.\n */\nexport function computeFirstLevelFoldRanges(text: string): { from: number; to: number }[] {\n  const ranges: { from: number; to: number }[] = [];\n  const n = text.length;\n  let i = 0;\n  while (i < n && text[i] !== \"{\" && text[i] !== \"[\") i++;\n  if (i >= n) return ranges;\n\n  let depth = 0;\n  let inString = false;\n  let pendingStart = -1;\n  for (; i < n; i++) {\n    const ch = text[i];\n    if (inString) {\n      if (ch === \"\\\\\") i++;\n      else if (ch === '\"') inString = false;\n      continue;\n    }\n    if (ch === '\"') {\n      inString = true;\n      continue;\n    }\n    if (ch === \"{\" || ch === \"[\") {\n      depth++;\n      if (depth === 2) pendingStart = i + 1;\n      continue;\n    }\n    if (ch === \"}\" || ch === \"]\") {\n      if (depth === 2 && pendingStart !== -1) {\n        ranges.push({ from: pendingStart, to: i });\n        pendingStart = -1;\n      }\n      depth--;\n    }\n  }\n  return ranges;\n}\n"],"names":["jsonHighlightStyle","HighlightStyle","t","jsonEditorTheme","EditorView","jsonEditorExtensions","json","foldGutter","syntaxHighlighting","serializeJson","value","toCssSize","size","toEditorSizeStyle","height","minHeight","maxHeight","sizeVariables","computeFirstLevelFoldRanges","text","ranges","n","i","depth","inString","pendingStart","ch"],"mappings":";;;;AAMO,MAAMA,IAAqBC,EAAe,OAAO;AAAA,EACtD,EAAE,KAAKC,EAAE,cAAc,OAAO,+BAAA;AAAA,EAC9B,EAAE,KAAKA,EAAE,QAAQ,OAAO,mCAAmC,YAAY,IAAA;AAAA,EACvE,EAAE,KAAK,CAACA,EAAE,QAAQA,EAAE,MAAMA,EAAE,IAAI,GAAG,OAAO,kCAAA;AAAA,EAC1C,EAAE,KAAK,CAACA,EAAE,WAAWA,EAAE,eAAeA,EAAE,KAAK,GAAG,OAAO,uCAAA;AACzD,CAAC,GAEYC,IAAkBC,EAAW,MAAM;AAAA,EAC9C,KAAK,EAAE,iBAAiB,eAAe,OAAO,wCAAwC,UAAU,OAAA;AAAA,EAChG,gBAAgB,EAAE,SAAS,OAAA;AAAA,EAC3B,eAAe,EAAE,YAAY,qCAAqC,SAAS,qBAAA;AAAA,EAC3E,eAAe;AAAA,IACb,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf,gBAAgB,EAAE,UAAU,OAAA;AAC9B,CAAC,GAEYC,IAAuB,CAACC,EAAA,GAAQC,KAAcC,EAAmBR,CAAkB,CAAC;AAE1F,SAASS,EAAcC,GAAwB;AACpD,MAAI;AACF,WAAO,KAAK,UAAUA,GAAO,MAAM,CAAC,KAAK;AAAA,EAC3C,QAAQ;AACN,WAAO,OAAOA,CAAK;AAAA,EACrB;AACF;AAEO,SAASC,EAAUC,GAA+B;AACvD,SAAO,OAAOA,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAClD;AAQO,SAASC,EAAkB,EAAE,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,KAA4C;AACjG,QAAMC,IAAwC,CAAA;AAC9C,SAAIH,MAAW,WAAWG,EAAc,sBAAsB,IAAIN,EAAUG,CAAM,IAC9EC,MAAc,WAAWE,EAAc,0BAA0B,IAAIN,EAAUI,CAAS,IACxFC,MAAc,WAAWC,EAAc,0BAA0B,IAAIN,EAAUK,CAAS,IACrFC;AACT;AASO,SAASC,EAA4BC,GAA8C;AACxF,QAAMC,IAAyC,CAAA,GACzCC,IAAIF,EAAK;AACf,MAAIG,IAAI;AACR,SAAOA,IAAID,KAAKF,EAAKG,CAAC,MAAM,OAAOH,EAAKG,CAAC,MAAM,MAAK,CAAAA;AACpD,MAAIA,KAAKD,EAAG,QAAOD;AAEnB,MAAIG,IAAQ,GACRC,IAAW,IACXC,IAAe;AACnB,SAAOH,IAAID,GAAGC,KAAK;AACjB,UAAMI,IAAKP,EAAKG,CAAC;AACjB,QAAIE,GAAU;AACZ,MAAIE,MAAO,OAAMJ,MACRI,MAAO,QAAKF,IAAW;AAChC;AAAA,IACF;AACA,QAAIE,MAAO,KAAK;AACd,MAAAF,IAAW;AACX;AAAA,IACF;AACA,QAAIE,MAAO,OAAOA,MAAO,KAAK;AAC5B,MAAAH,KACIA,MAAU,MAAGE,IAAeH,IAAI;AACpC;AAAA,IACF;AACA,KAAII,MAAO,OAAOA,MAAO,SACnBH,MAAU,KAAKE,MAAiB,OAClCL,EAAO,KAAK,EAAE,MAAMK,GAAc,IAAIH,GAAG,GACzCG,IAAe,KAEjBF;AAAA,EAEJ;AACA,SAAOH;AACT;"}
+{"version":3,"file":"json-code-mirror.js","sources":["../../../../../src/ui/primitives/JsonViewer/json-code-mirror.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { EditorView } from \"@codemirror/view\";\nimport { json } from \"@codemirror/lang-json\";\nimport { foldGutter, HighlightStyle, syntaxHighlighting } from \"@codemirror/language\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const jsonHighlightStyle = HighlightStyle.define([\n  { tag: t.propertyName, color: \"var(--json-viewer-color-key)\" },\n  { tag: t.string, color: \"var(--json-viewer-color-string)\", fontWeight: 600 },\n  { tag: [t.number, t.bool, t.null], color: \"var(--json-viewer-color-scalar)\" },\n  { tag: [t.separator, t.squareBracket, t.brace], color: \"var(--json-viewer-color-punctuation)\" },\n]);\n\nexport const jsonEditorTheme = EditorView.theme({\n  \"&\": { backgroundColor: \"transparent\", color: \"var(--json-viewer-color-punctuation)\", fontSize: \"13px\" },\n  \"&.cm-focused\": { outline: \"none\" },\n  \".cm-content\": { fontFamily: \"var(--sds-typography-family-mono)\", padding: \"8px 124px 12px 4px\" },\n  \".cm-gutters\": {\n    backgroundColor: \"transparent\",\n    border: \"none\",\n    color: \"var(--json-viewer-color-caret)\",\n    paddingLeft: \"5px\",\n  },\n  \".cm-scroller\": { overflow: \"auto\" },\n});\n\nexport const jsonEditorExtensions = [json(), foldGutter(), syntaxHighlighting(jsonHighlightStyle)];\n\nexport function serializeJson(value: unknown): string {\n  try {\n    return JSON.stringify(value, null, 2) ?? \"null\";\n  } catch {\n    return String(value);\n  }\n}\n\nexport function toCssSize(size: string | number): string {\n  return typeof size === \"number\" ? `${size}px` : size;\n}\n\nexport interface JsonEditorSize {\n  height?: string | number;\n  minHeight?: string | number;\n  maxHeight?: string | number;\n}\n\nexport function toEditorSizeStyle({ height, minHeight, maxHeight }: JsonEditorSize): CSSProperties {\n  const sizeVariables: Record<string, string> = {};\n  if (height !== undefined) sizeVariables[\"--json-viewer-height\"] = toCssSize(height);\n  if (minHeight !== undefined) sizeVariables[\"--json-viewer-min-height\"] = toCssSize(minHeight);\n  if (maxHeight !== undefined) sizeVariables[\"--json-viewer-max-height\"] = toCssSize(maxHeight);\n  return sizeVariables as CSSProperties;\n}\n\n/**\n * Finds the fold range of every direct child (depth 1) of the root object/array\n * by scanning the text itself for matching brackets. This mirrors what\n * CodeMirror's `foldable()` would compute, but doesn't depend on the lezer\n * parser having finished tokenizing the document — which for a multi-MB\n * document is not guaranteed synchronously at mount time.\n */\nexport function computeFirstLevelFoldRanges(text: string): { from: number; to: number }[] {\n  const ranges: { from: number; to: number }[] = [];\n  const n = text.length;\n  let i = 0;\n  while (i < n && text[i] !== \"{\" && text[i] !== \"[\") i++;\n  if (i >= n) return ranges;\n\n  let depth = 0;\n  let inString = false;\n  let pendingStart = -1;\n  for (; i < n; i++) {\n    const ch = text[i];\n    if (inString) {\n      if (ch === \"\\\\\") i++;\n      else if (ch === '\"') inString = false;\n      continue;\n    }\n    if (ch === '\"') {\n      inString = true;\n      continue;\n    }\n    if (ch === \"{\" || ch === \"[\") {\n      depth++;\n      if (depth === 2) pendingStart = i + 1;\n      continue;\n    }\n    if (ch === \"}\" || ch === \"]\") {\n      if (depth === 2 && pendingStart !== -1) {\n        const isEmptyBlock = i === pendingStart;\n        if (!isEmptyBlock) ranges.push({ from: pendingStart, to: i });\n        pendingStart = -1;\n      }\n      depth--;\n    }\n  }\n  return ranges;\n}\n"],"names":["jsonHighlightStyle","HighlightStyle","t","jsonEditorTheme","EditorView","jsonEditorExtensions","json","foldGutter","syntaxHighlighting","serializeJson","value","toCssSize","size","toEditorSizeStyle","height","minHeight","maxHeight","sizeVariables","computeFirstLevelFoldRanges","text","ranges","n","i","depth","inString","pendingStart","ch"],"mappings":";;;;AAMO,MAAMA,IAAqBC,EAAe,OAAO;AAAA,EACtD,EAAE,KAAKC,EAAE,cAAc,OAAO,+BAAA;AAAA,EAC9B,EAAE,KAAKA,EAAE,QAAQ,OAAO,mCAAmC,YAAY,IAAA;AAAA,EACvE,EAAE,KAAK,CAACA,EAAE,QAAQA,EAAE,MAAMA,EAAE,IAAI,GAAG,OAAO,kCAAA;AAAA,EAC1C,EAAE,KAAK,CAACA,EAAE,WAAWA,EAAE,eAAeA,EAAE,KAAK,GAAG,OAAO,uCAAA;AACzD,CAAC,GAEYC,IAAkBC,EAAW,MAAM;AAAA,EAC9C,KAAK,EAAE,iBAAiB,eAAe,OAAO,wCAAwC,UAAU,OAAA;AAAA,EAChG,gBAAgB,EAAE,SAAS,OAAA;AAAA,EAC3B,eAAe,EAAE,YAAY,qCAAqC,SAAS,qBAAA;AAAA,EAC3E,eAAe;AAAA,IACb,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf,gBAAgB,EAAE,UAAU,OAAA;AAC9B,CAAC,GAEYC,IAAuB,CAACC,EAAA,GAAQC,KAAcC,EAAmBR,CAAkB,CAAC;AAE1F,SAASS,EAAcC,GAAwB;AACpD,MAAI;AACF,WAAO,KAAK,UAAUA,GAAO,MAAM,CAAC,KAAK;AAAA,EAC3C,QAAQ;AACN,WAAO,OAAOA,CAAK;AAAA,EACrB;AACF;AAEO,SAASC,EAAUC,GAA+B;AACvD,SAAO,OAAOA,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAClD;AAQO,SAASC,EAAkB,EAAE,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,KAA4C;AACjG,QAAMC,IAAwC,CAAA;AAC9C,SAAIH,MAAW,WAAWG,EAAc,sBAAsB,IAAIN,EAAUG,CAAM,IAC9EC,MAAc,WAAWE,EAAc,0BAA0B,IAAIN,EAAUI,CAAS,IACxFC,MAAc,WAAWC,EAAc,0BAA0B,IAAIN,EAAUK,CAAS,IACrFC;AACT;AASO,SAASC,EAA4BC,GAA8C;AACxF,QAAMC,IAAyC,CAAA,GACzCC,IAAIF,EAAK;AACf,MAAIG,IAAI;AACR,SAAOA,IAAID,KAAKF,EAAKG,CAAC,MAAM,OAAOH,EAAKG,CAAC,MAAM,MAAK,CAAAA;AACpD,MAAIA,KAAKD,EAAG,QAAOD;AAEnB,MAAIG,IAAQ,GACRC,IAAW,IACXC,IAAe;AACnB,SAAOH,IAAID,GAAGC,KAAK;AACjB,UAAMI,IAAKP,EAAKG,CAAC;AACjB,QAAIE,GAAU;AACZ,MAAIE,MAAO,OAAMJ,MACRI,MAAO,QAAKF,IAAW;AAChC;AAAA,IACF;AACA,QAAIE,MAAO,KAAK;AACd,MAAAF,IAAW;AACX;AAAA,IACF;AACA,QAAIE,MAAO,OAAOA,MAAO,KAAK;AAC5B,MAAAH,KACIA,MAAU,MAAGE,IAAeH,IAAI;AACpC;AAAA,IACF;AACA,KAAII,MAAO,OAAOA,MAAO,SACnBH,MAAU,KAAKE,MAAiB,OACbH,MAAMG,KACRL,EAAO,KAAK,EAAE,MAAMK,GAAc,IAAIH,GAAG,GAC5DG,IAAe,KAEjBF;AAAA,EAEJ;AACA,SAAOH;AACT;"}

package/dist/types/ui/components/charts/TopList/top-list-option.d.ts

@@ -16,6 +16,7 @@ export interface TopListOptionInput {
     colorsByItemId: Record<string, string>;
     animate: boolean;
     labeledRowStep: number;
+    canvasWidthPx: number;
     valueFormatter?: (value: number) => string;
 }
 export declare function rankById(items: TopListItem[], sort: TopListSort): Map<string, number>;

package/dist/types/ui/components/charts/chart-theme.d.ts

@@ -4,6 +4,8 @@ export interface ChartTheme {
     axisLineColor: string;
     splitLineColor: string;
     labelColor: string;
+    emphasizedLabelColor: string;
+    trackColor: string;
     tooltipBackgroundColor: string;
     tooltipBorderColor: string;
     fontFamily: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "7.2.0",
+  "version": "7.3.1",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [