@opencx/widget-react 4.0.61 → 5.0.0-beta.0

package/dist/Chart.impl-BnzKZLOH.js

@@ -0,0 +1,153 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import d from "react";
+import { PieChart as b, Tooltip as f, Legend as S, Pie as k, Cell as C, Label as R, LineChart as v, CartesianGrid as p, XAxis as y, YAxis as g, Line as z, BarChart as O, Bar as _ } from "recharts";
+import { u as K } from "./index-BCiFOCVT.js";
+function A() {
+  const t = d.useRef(null), [n, c] = d.useState(0);
+  return d.useLayoutEffect(() => {
+    const r = t.current;
+    if (!r) return;
+    const i = () => c(r.clientWidth);
+    i();
+    const l = new ResizeObserver(i);
+    return l.observe(r), () => l.disconnect();
+  }, []), { ref: t, width: n };
+}
+const L = "hsl(var(--opencx-foreground, 240 10% 20%))", x = [90, 70, 50, 30].map(
+  (t) => `color-mix(in oklch, ${L} ${t}%, transparent)`
+), u = (t) => x[t % x.length] ?? L, h = {
+  borderRadius: 8,
+  border: "1px solid color-mix(in oklch, currentColor 15%, transparent)",
+  fontSize: 12
+};
+function P({
+  type: t,
+  data: n,
+  height: c,
+  centerLabel: r
+}) {
+  const i = c ?? 220, { ref: l, width: a } = A();
+  return n.length === 0 ? /* @__PURE__ */ e(T, { height: i }) : /* @__PURE__ */ e("div", { ref: l, className: "w-full text-foreground", style: { height: i }, children: a > 0 && (t === "pie" ? /* @__PURE__ */ s(b, { width: a, height: i, children: [
+    /* @__PURE__ */ e(f, { contentStyle: h }),
+    /* @__PURE__ */ e(
+      S,
+      {
+        verticalAlign: "bottom",
+        iconType: "circle",
+        iconSize: 8,
+        wrapperStyle: { fontSize: 12 }
+      }
+    ),
+    /* @__PURE__ */ s(
+      k,
+      {
+        data: n,
+        dataKey: "value",
+        nameKey: "label",
+        outerRadius: "85%",
+        innerRadius: "60%",
+        children: [
+          n.map((o, m) => /* @__PURE__ */ e(C, { fill: u(m) }, m)),
+          r && /* @__PURE__ */ e(
+            R,
+            {
+              position: "center",
+              content: ({ viewBox: o }) => {
+                if (o && "cx" in o && "cy" in o)
+                  return /* @__PURE__ */ e(
+                    "text",
+                    {
+                      x: o.cx,
+                      y: o.cy,
+                      textAnchor: "middle",
+                      dominantBaseline: "middle",
+                      className: "fill-foreground text-2xl font-medium",
+                      children: r
+                    }
+                  );
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] }) : t === "line" ? /* @__PURE__ */ s(
+    v,
+    {
+      width: a,
+      height: i,
+      data: n,
+      margin: { top: 8, right: 8, bottom: 0, left: -16 },
+      children: [
+        /* @__PURE__ */ e(p, { strokeOpacity: 0.15, vertical: !1 }),
+        /* @__PURE__ */ e(
+          y,
+          {
+            dataKey: "label",
+            tickLine: !1,
+            axisLine: !1,
+            tickMargin: 10,
+            fontSize: 11
+          }
+        ),
+        /* @__PURE__ */ e(g, { tickLine: !1, axisLine: !1, fontSize: 11, width: 32 }),
+        /* @__PURE__ */ e(f, { contentStyle: h }),
+        /* @__PURE__ */ e(
+          z,
+          {
+            type: "monotone",
+            dataKey: "value",
+            stroke: u(0),
+            strokeWidth: 2,
+            dot: !1
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ s(
+    O,
+    {
+      width: a,
+      height: i,
+      data: n,
+      margin: { top: 8, right: 8, bottom: 0, left: -16 },
+      children: [
+        /* @__PURE__ */ e(p, { strokeOpacity: 0.15, vertical: !1 }),
+        /* @__PURE__ */ e(
+          y,
+          {
+            dataKey: "label",
+            tickLine: !1,
+            axisLine: !1,
+            tickMargin: 10,
+            fontSize: 11
+          }
+        ),
+        /* @__PURE__ */ e(g, { tickLine: !1, axisLine: !1, fontSize: 11, width: 32 }),
+        /* @__PURE__ */ e(
+          f,
+          {
+            contentStyle: h,
+            cursor: { fillOpacity: 0.06 }
+          }
+        ),
+        /* @__PURE__ */ e(_, { dataKey: "value", fill: u(0), radius: [4, 4, 0, 0] })
+      ]
+    }
+  )) });
+}
+function T({ height: t }) {
+  const { t: n } = K();
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "flex w-full items-center justify-center rounded-lg border border-muted-foreground/15 text-xs text-muted-foreground",
+      style: { height: t },
+      children: n("json_no_chart_data")
+    }
+  );
+}
+export {
+  P as default
+};
+//# sourceMappingURL=Chart.impl-BnzKZLOH.js.map

package/dist/Chart.impl-BnzKZLOH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.impl-BnzKZLOH.js","sources":["../src/json-render/Chart.impl.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  Label,\n  Legend,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport type { ChartProps } from './props';\nimport { useJsonRenderHost } from './host';\n\n/**\n * Measure the wrapper width ourselves instead of relying on recharts'\n * `ResponsiveContainer`. On recharts 2.12 that container renders an empty,\n * svg-less box whenever it mounts measuring 0 — which is exactly this case: the\n * chart is a `React.lazy` chunk that mounts after the widget popover has laid\n * out, and it never re-measures on its own. Feeding recharts an explicit numeric\n * width sidesteps the trap; the `ResizeObserver` keeps it in sync when the embed\n * is resized.\n */\nfunction useContainerWidth(): {\n  ref: React.RefObject<HTMLDivElement | null>;\n  width: number;\n} {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [width, setWidth] = React.useState(0);\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const update = () => setWidth(el.clientWidth);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n  return { ref, width };\n}\n\n/**\n * The actual chart renderer. Loaded lazily (see `Chart.tsx`) so recharts — the\n * one heavy dependency in the registry — is a separate chunk that only downloads\n * when the agent actually emits a Chart.\n *\n * Styled to match the companion/Impact-Dashboard charts: a monochrome ramp of\n * the theme foreground (90/70/50/30% alpha), donut pie with an optional center\n * label + legend, and clean axes (no tick/axis lines). The ramp reads the\n * widget's `--opencx-foreground` token so charts follow the embed theme, with\n * a neutral fallback for any context where the token is missing.\n */\n\nconst FOREGROUND = 'hsl(var(--opencx-foreground, 240 10% 20%))';\n// Same ramp as the dashboard's REPORTS_COLOR (surface-foreground at 90/70/50/30%).\nconst RAMP = [90, 70, 50, 30].map(\n  (pct) => `color-mix(in oklch, ${FOREGROUND} ${pct}%, transparent)`,\n);\nconst rampColor = (i: number): string => RAMP[i % RAMP.length] ?? FOREGROUND;\n\nconst TOOLTIP_STYLE: React.CSSProperties = {\n  borderRadius: 8,\n  border: '1px solid color-mix(in oklch, currentColor 15%, transparent)',\n  fontSize: 12,\n};\n\nexport default function ChartImpl({\n  type,\n  data,\n  height,\n  centerLabel,\n}: ChartProps) {\n  const h = height ?? 220;\n  const { ref, width } = useContainerWidth();\n\n  if (data.length === 0) {\n    return <ChartEmpty height={h} />;\n  }\n\n  return (\n    <div ref={ref} className=\"w-full text-foreground\" style={{ height: h }}>\n      {width > 0 &&\n        (type === 'pie' ? (\n          <PieChart width={width} height={h}>\n            <Tooltip contentStyle={TOOLTIP_STYLE} />\n            <Legend\n              verticalAlign=\"bottom\"\n              iconType=\"circle\"\n              iconSize={8}\n              wrapperStyle={{ fontSize: 12 }}\n            />\n            <Pie\n              data={data}\n              dataKey=\"value\"\n              nameKey=\"label\"\n              outerRadius=\"85%\"\n              innerRadius=\"60%\"\n            >\n              {data.map((_, i) => (\n                <Cell key={i} fill={rampColor(i)} />\n              ))}\n              {centerLabel && (\n                <Label\n                  position=\"center\"\n                  content={({ viewBox }) => {\n                    if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                          className=\"fill-foreground text-2xl font-medium\"\n                        >\n                          {centerLabel}\n                        </text>\n                      );\n                    }\n                  }}\n                />\n              )}\n            </Pie>\n          </PieChart>\n        ) : type === 'line' ? (\n          <LineChart\n            width={width}\n            height={h}\n            data={data}\n            margin={{ top: 8, right: 8, bottom: 0, left: -16 }}\n          >\n            <CartesianGrid strokeOpacity={0.15} vertical={false} />\n            <XAxis\n              dataKey=\"label\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={10}\n              fontSize={11}\n            />\n            <YAxis tickLine={false} axisLine={false} fontSize={11} width={32} />\n            <Tooltip contentStyle={TOOLTIP_STYLE} />\n            <Line\n              type=\"monotone\"\n              dataKey=\"value\"\n              stroke={rampColor(0)}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        ) : (\n          <BarChart\n            width={width}\n            height={h}\n            data={data}\n            margin={{ top: 8, right: 8, bottom: 0, left: -16 }}\n          >\n            <CartesianGrid strokeOpacity={0.15} vertical={false} />\n            <XAxis\n              dataKey=\"label\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={10}\n              fontSize={11}\n            />\n            <YAxis tickLine={false} axisLine={false} fontSize={11} width={32} />\n            <Tooltip\n              contentStyle={TOOLTIP_STYLE}\n              cursor={{ fillOpacity: 0.06 }}\n            />\n            <Bar dataKey=\"value\" fill={rampColor(0)} radius={[4, 4, 0, 0]} />\n          </BarChart>\n        ))}\n    </div>\n  );\n}\n\nfunction ChartEmpty({ height }: { height: number }) {\n  const { t } = useJsonRenderHost();\n  return (\n    <div\n      className=\"flex w-full items-center justify-center rounded-lg border border-muted-foreground/15 text-xs text-muted-foreground\"\n      style={{ height }}\n    >\n      {t('json_no_chart_data')}\n    </div>\n  );\n}\n"],"names":["useContainerWidth","ref","React","width","setWidth","el","update","observer","FOREGROUND","RAMP","pct","rampColor","i","TOOLTIP_STYLE","ChartImpl","type","data","height","centerLabel","h","jsx","ChartEmpty","PieChart","Tooltip","Legend","jsxs","Pie","_","Cell","Label","viewBox","LineChart","CartesianGrid","XAxis","YAxis","Line","BarChart","Bar","t","useJsonRenderHost"],"mappings":"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"}

package/dist/Chart.impl-DOSb1NJk.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),t=require("recharts"),j=require("./index-CqbztkwP.cjs");function p(){const i=d.useRef(null),[n,c]=d.useState(0);return d.useLayoutEffect(()=>{const s=i.current;if(!s)return;const r=()=>c(s.clientWidth);r();const l=new ResizeObserver(r);return l.observe(s),()=>l.disconnect()},[]),{ref:i,width:n}}const m="hsl(var(--opencx-foreground, 240 10% 20%))",h=[90,70,50,30].map(i=>`color-mix(in oklch, ${m} ${i}%, transparent)`),u=i=>h[i%h.length]??m,f={borderRadius:8,border:"1px solid color-mix(in oklch, currentColor 15%, transparent)",fontSize:12};function y({type:i,data:n,height:c,centerLabel:s}){const r=c??220,{ref:l,width:a}=p();return n.length===0?e.jsx(g,{height:r}):e.jsx("div",{ref:l,className:"w-full text-foreground",style:{height:r},children:a>0&&(i==="pie"?e.jsxs(t.PieChart,{width:a,height:r,children:[e.jsx(t.Tooltip,{contentStyle:f}),e.jsx(t.Legend,{verticalAlign:"bottom",iconType:"circle",iconSize:8,wrapperStyle:{fontSize:12}}),e.jsxs(t.Pie,{data:n,dataKey:"value",nameKey:"label",outerRadius:"85%",innerRadius:"60%",children:[n.map((o,x)=>e.jsx(t.Cell,{fill:u(x)},x)),s&&e.jsx(t.Label,{position:"center",content:({viewBox:o})=>{if(o&&"cx"in o&&"cy"in o)return e.jsx("text",{x:o.cx,y:o.cy,textAnchor:"middle",dominantBaseline:"middle",className:"fill-foreground text-2xl font-medium",children:s})}})]})]}):i==="line"?e.jsxs(t.LineChart,{width:a,height:r,data:n,margin:{top:8,right:8,bottom:0,left:-16},children:[e.jsx(t.CartesianGrid,{strokeOpacity:.15,vertical:!1}),e.jsx(t.XAxis,{dataKey:"label",tickLine:!1,axisLine:!1,tickMargin:10,fontSize:11}),e.jsx(t.YAxis,{tickLine:!1,axisLine:!1,fontSize:11,width:32}),e.jsx(t.Tooltip,{contentStyle:f}),e.jsx(t.Line,{type:"monotone",dataKey:"value",stroke:u(0),strokeWidth:2,dot:!1})]}):e.jsxs(t.BarChart,{width:a,height:r,data:n,margin:{top:8,right:8,bottom:0,left:-16},children:[e.jsx(t.CartesianGrid,{strokeOpacity:.15,vertical:!1}),e.jsx(t.XAxis,{dataKey:"label",tickLine:!1,axisLine:!1,tickMargin:10,fontSize:11}),e.jsx(t.YAxis,{tickLine:!1,axisLine:!1,fontSize:11,width:32}),e.jsx(t.Tooltip,{contentStyle:f,cursor:{fillOpacity:.06}}),e.jsx(t.Bar,{dataKey:"value",fill:u(0),radius:[4,4,0,0]})]}))})}function g({height:i}){const{t:n}=j.useJsonRenderHost();return e.jsx("div",{className:"flex w-full items-center justify-center rounded-lg border border-muted-foreground/15 text-xs text-muted-foreground",style:{height:i},children:n("json_no_chart_data")})}exports.default=y;
+//# sourceMappingURL=Chart.impl-DOSb1NJk.cjs.map

package/dist/Chart.impl-DOSb1NJk.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.impl-DOSb1NJk.cjs","sources":["../src/json-render/Chart.impl.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  Label,\n  Legend,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport type { ChartProps } from './props';\nimport { useJsonRenderHost } from './host';\n\n/**\n * Measure the wrapper width ourselves instead of relying on recharts'\n * `ResponsiveContainer`. On recharts 2.12 that container renders an empty,\n * svg-less box whenever it mounts measuring 0 — which is exactly this case: the\n * chart is a `React.lazy` chunk that mounts after the widget popover has laid\n * out, and it never re-measures on its own. Feeding recharts an explicit numeric\n * width sidesteps the trap; the `ResizeObserver` keeps it in sync when the embed\n * is resized.\n */\nfunction useContainerWidth(): {\n  ref: React.RefObject<HTMLDivElement | null>;\n  width: number;\n} {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [width, setWidth] = React.useState(0);\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const update = () => setWidth(el.clientWidth);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n  return { ref, width };\n}\n\n/**\n * The actual chart renderer. Loaded lazily (see `Chart.tsx`) so recharts — the\n * one heavy dependency in the registry — is a separate chunk that only downloads\n * when the agent actually emits a Chart.\n *\n * Styled to match the companion/Impact-Dashboard charts: a monochrome ramp of\n * the theme foreground (90/70/50/30% alpha), donut pie with an optional center\n * label + legend, and clean axes (no tick/axis lines). The ramp reads the\n * widget's `--opencx-foreground` token so charts follow the embed theme, with\n * a neutral fallback for any context where the token is missing.\n */\n\nconst FOREGROUND = 'hsl(var(--opencx-foreground, 240 10% 20%))';\n// Same ramp as the dashboard's REPORTS_COLOR (surface-foreground at 90/70/50/30%).\nconst RAMP = [90, 70, 50, 30].map(\n  (pct) => `color-mix(in oklch, ${FOREGROUND} ${pct}%, transparent)`,\n);\nconst rampColor = (i: number): string => RAMP[i % RAMP.length] ?? FOREGROUND;\n\nconst TOOLTIP_STYLE: React.CSSProperties = {\n  borderRadius: 8,\n  border: '1px solid color-mix(in oklch, currentColor 15%, transparent)',\n  fontSize: 12,\n};\n\nexport default function ChartImpl({\n  type,\n  data,\n  height,\n  centerLabel,\n}: ChartProps) {\n  const h = height ?? 220;\n  const { ref, width } = useContainerWidth();\n\n  if (data.length === 0) {\n    return <ChartEmpty height={h} />;\n  }\n\n  return (\n    <div ref={ref} className=\"w-full text-foreground\" style={{ height: h }}>\n      {width > 0 &&\n        (type === 'pie' ? (\n          <PieChart width={width} height={h}>\n            <Tooltip contentStyle={TOOLTIP_STYLE} />\n            <Legend\n              verticalAlign=\"bottom\"\n              iconType=\"circle\"\n              iconSize={8}\n              wrapperStyle={{ fontSize: 12 }}\n            />\n            <Pie\n              data={data}\n              dataKey=\"value\"\n              nameKey=\"label\"\n              outerRadius=\"85%\"\n              innerRadius=\"60%\"\n            >\n              {data.map((_, i) => (\n                <Cell key={i} fill={rampColor(i)} />\n              ))}\n              {centerLabel && (\n                <Label\n                  position=\"center\"\n                  content={({ viewBox }) => {\n                    if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                          className=\"fill-foreground text-2xl font-medium\"\n                        >\n                          {centerLabel}\n                        </text>\n                      );\n                    }\n                  }}\n                />\n              )}\n            </Pie>\n          </PieChart>\n        ) : type === 'line' ? (\n          <LineChart\n            width={width}\n            height={h}\n            data={data}\n            margin={{ top: 8, right: 8, bottom: 0, left: -16 }}\n          >\n            <CartesianGrid strokeOpacity={0.15} vertical={false} />\n            <XAxis\n              dataKey=\"label\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={10}\n              fontSize={11}\n            />\n            <YAxis tickLine={false} axisLine={false} fontSize={11} width={32} />\n            <Tooltip contentStyle={TOOLTIP_STYLE} />\n            <Line\n              type=\"monotone\"\n              dataKey=\"value\"\n              stroke={rampColor(0)}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        ) : (\n          <BarChart\n            width={width}\n            height={h}\n            data={data}\n            margin={{ top: 8, right: 8, bottom: 0, left: -16 }}\n          >\n            <CartesianGrid strokeOpacity={0.15} vertical={false} />\n            <XAxis\n              dataKey=\"label\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={10}\n              fontSize={11}\n            />\n            <YAxis tickLine={false} axisLine={false} fontSize={11} width={32} />\n            <Tooltip\n              contentStyle={TOOLTIP_STYLE}\n              cursor={{ fillOpacity: 0.06 }}\n            />\n            <Bar dataKey=\"value\" fill={rampColor(0)} radius={[4, 4, 0, 0]} />\n          </BarChart>\n        ))}\n    </div>\n  );\n}\n\nfunction ChartEmpty({ height }: { height: number }) {\n  const { t } = useJsonRenderHost();\n  return (\n    <div\n      className=\"flex w-full items-center justify-center rounded-lg border border-muted-foreground/15 text-xs text-muted-foreground\"\n      style={{ height }}\n    >\n      {t('json_no_chart_data')}\n    </div>\n  );\n}\n"],"names":["useContainerWidth","ref","React","width","setWidth","el","update","observer","FOREGROUND","RAMP","pct","rampColor","TOOLTIP_STYLE","ChartImpl","type","data","height","centerLabel","h","jsx","ChartEmpty","PieChart","Tooltip","Legend","jsxs","Pie","_","i","Cell","Label","viewBox","LineChart","CartesianGrid","XAxis","YAxis","Line","BarChart","Bar","t","useJsonRenderHost"],"mappings":"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"}