@ansible/ansible-ui-framework 2.4.410 → 2.4.412
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/framework/PageDashboard/PageDashboardChart.d.ts +6 -0
- package/index.js +51 -50
- package/index.umd.cjs +1 -1
- package/package.json +1 -1
|
@@ -19,5 +19,11 @@ export declare function PageDashboardChart(props: {
|
|
|
19
19
|
xLabel?: string;
|
|
20
20
|
allowZero?: boolean;
|
|
21
21
|
variant?: 'stackedAreaChart' | 'lineChart';
|
|
22
|
+
padding?: {
|
|
23
|
+
top?: number;
|
|
24
|
+
bottom?: number;
|
|
25
|
+
left?: number;
|
|
26
|
+
right: number;
|
|
27
|
+
};
|
|
22
28
|
height?: number;
|
|
23
29
|
}): import("react/jsx-runtime").JSX.Element;
|
package/index.js
CHANGED
|
@@ -31861,35 +31861,36 @@ const rqe = Kt.div`
|
|
|
31861
31861
|
`;
|
|
31862
31862
|
const uqe = ABe("voronoi", "cursor");
|
|
31863
31863
|
function Jyt(n) {
|
|
31864
|
+
var d, h, f, g;
|
|
31864
31865
|
const { allowZero: e, xLabel: t, yLabel: i, minDomain: r, onlyIntegerTicks: o } = n;
|
|
31865
31866
|
let { groups: s } = n;
|
|
31866
|
-
s = e ? s : s.filter((
|
|
31867
|
-
for (const
|
|
31868
|
-
if (
|
|
31867
|
+
s = e ? s : s.filter((m) => {
|
|
31868
|
+
for (const p of m.values)
|
|
31869
|
+
if (p.value !== 0)
|
|
31869
31870
|
return !0;
|
|
31870
31871
|
return !1;
|
|
31871
31872
|
});
|
|
31872
|
-
const a = s.filter((
|
|
31873
|
-
childName: `${
|
|
31873
|
+
const a = s.filter((m) => !!m.label).map((m, p) => ({
|
|
31874
|
+
childName: `${p}`,
|
|
31874
31875
|
// Sync tooltip legend with the series associated with given chart name
|
|
31875
|
-
name:
|
|
31876
|
-
symbol: { fill:
|
|
31877
|
-
})), l = s.filter((
|
|
31878
|
-
label:
|
|
31879
|
-
count:
|
|
31880
|
-
color:
|
|
31881
|
-
link:
|
|
31876
|
+
name: m.label,
|
|
31877
|
+
symbol: { fill: m.color, type: "square" }
|
|
31878
|
+
})), l = s.filter((m) => !!m.label).map((m) => ({
|
|
31879
|
+
label: m.label,
|
|
31880
|
+
count: m.values.reduce((p, _) => p + _.value, 0),
|
|
31881
|
+
color: m.color,
|
|
31882
|
+
link: m.link
|
|
31882
31883
|
})), c = rt(() => {
|
|
31883
|
-
const
|
|
31884
|
-
for (const
|
|
31885
|
-
for (const
|
|
31886
|
-
|
|
31887
|
-
return Object.values(
|
|
31884
|
+
const m = {};
|
|
31885
|
+
for (const p of s)
|
|
31886
|
+
for (const _ of p.values)
|
|
31887
|
+
m[_.label] = (m[_.label] ?? 0) + _.value;
|
|
31888
|
+
return Object.values(m).reduce((p, _) => _ > p ? _ : p, 0);
|
|
31888
31889
|
}, [s]), u = {
|
|
31889
|
-
top: 4 + 16,
|
|
31890
|
-
bottom: 32 + 16,
|
|
31891
|
-
left: 12 + Math.round(c).toString().length * 9.5 + 16,
|
|
31892
|
-
right: 0 + 16
|
|
31890
|
+
top: (((d = n.padding) == null ? void 0 : d.top) ?? 4) + 16,
|
|
31891
|
+
bottom: (((h = n.padding) == null ? void 0 : h.bottom) ?? 32) + 16,
|
|
31892
|
+
left: (((f = n.padding) == null ? void 0 : f.left) ?? 12) + Math.round(c).toString().length * 9.5 + 16,
|
|
31893
|
+
right: (((g = n.padding) == null ? void 0 : g.right) ?? 0) + 16
|
|
31893
31894
|
};
|
|
31894
31895
|
return /* @__PURE__ */ x.jsxs(
|
|
31895
31896
|
"div",
|
|
@@ -31912,24 +31913,24 @@ function Jyt(n) {
|
|
|
31912
31913
|
gap: 16
|
|
31913
31914
|
},
|
|
31914
31915
|
children: [
|
|
31915
|
-
/* @__PURE__ */ x.jsx("div", { style: { height: "100%", margin: -16 }, children: /* @__PURE__ */ x.jsx(aI, { className: "page-chart", children: (
|
|
31916
|
+
/* @__PURE__ */ x.jsx("div", { style: { height: "100%", margin: -16 }, children: /* @__PURE__ */ x.jsx(aI, { className: "page-chart", children: (m) => /* @__PURE__ */ x.jsxs(
|
|
31916
31917
|
MR,
|
|
31917
31918
|
{
|
|
31918
31919
|
padding: u,
|
|
31919
|
-
colorScale: s.map((
|
|
31920
|
-
height:
|
|
31921
|
-
width:
|
|
31920
|
+
colorScale: s.map((p) => p.color),
|
|
31921
|
+
height: m.height,
|
|
31922
|
+
width: m.width,
|
|
31922
31923
|
minDomain: r,
|
|
31923
31924
|
maxDomain: { y: c },
|
|
31924
31925
|
containerComponent: /* @__PURE__ */ x.jsx(
|
|
31925
31926
|
uqe,
|
|
31926
31927
|
{
|
|
31927
31928
|
cursorDimension: "x",
|
|
31928
|
-
labels: (
|
|
31929
|
+
labels: (p) => p.datum.y.toString(),
|
|
31929
31930
|
labelComponent: /* @__PURE__ */ x.jsx(
|
|
31930
31931
|
jR,
|
|
31931
31932
|
{
|
|
31932
|
-
title: (
|
|
31933
|
+
title: (p) => p.x,
|
|
31933
31934
|
legendData: a,
|
|
31934
31935
|
cornerRadius: 8
|
|
31935
31936
|
}
|
|
@@ -31946,50 +31947,50 @@ function Jyt(n) {
|
|
|
31946
31947
|
{
|
|
31947
31948
|
dependentAxis: !0,
|
|
31948
31949
|
showGrid: !0,
|
|
31949
|
-
tickFormat: o === !1 ? void 0 : (
|
|
31950
|
+
tickFormat: o === !1 ? void 0 : (p) => Number.isInteger(p) ? p : ""
|
|
31950
31951
|
}
|
|
31951
31952
|
),
|
|
31952
|
-
n.variant === "lineChart" && s.map((
|
|
31953
|
+
n.variant === "lineChart" && s.map((p, _) => /* @__PURE__ */ x.jsx(
|
|
31953
31954
|
zR,
|
|
31954
31955
|
{
|
|
31955
|
-
name:
|
|
31956
|
-
style: { data: { strokeWidth: 3, stroke:
|
|
31957
|
-
data:
|
|
31956
|
+
name: _.toString(),
|
|
31957
|
+
style: { data: { strokeWidth: 3, stroke: p.color } },
|
|
31958
|
+
data: p.values.map((v) => ({ x: v.label, y: v.value })),
|
|
31958
31959
|
interpolation: "monotoneX"
|
|
31959
31960
|
},
|
|
31960
|
-
|
|
31961
|
+
_
|
|
31961
31962
|
)),
|
|
31962
|
-
n.variant === "lineChart" && s.map((
|
|
31963
|
+
n.variant === "lineChart" && s.map((p, _) => /* @__PURE__ */ x.jsx(
|
|
31963
31964
|
zx,
|
|
31964
31965
|
{
|
|
31965
|
-
name: "scatter-" +
|
|
31966
|
-
data:
|
|
31967
|
-
size: ({ active:
|
|
31968
|
-
style: { data: { fill:
|
|
31966
|
+
name: "scatter-" + _,
|
|
31967
|
+
data: p.values.map((v) => ({ x: v.label, y: v.value })),
|
|
31968
|
+
size: ({ active: v }) => v ? 6 : 3,
|
|
31969
|
+
style: { data: { fill: p.color } }
|
|
31969
31970
|
},
|
|
31970
|
-
"scatter-" +
|
|
31971
|
+
"scatter-" + _
|
|
31971
31972
|
)),
|
|
31972
|
-
(!n.variant || n.variant === "stackedAreaChart") && /* @__PURE__ */ x.jsx(Gx, { children: s.map((
|
|
31973
|
+
(!n.variant || n.variant === "stackedAreaChart") && /* @__PURE__ */ x.jsx(Gx, { children: s.map((p, _) => /* @__PURE__ */ x.jsx(
|
|
31973
31974
|
RR,
|
|
31974
31975
|
{
|
|
31975
|
-
name:
|
|
31976
|
-
data:
|
|
31976
|
+
name: _.toString(),
|
|
31977
|
+
data: p.values.map((v) => ({ x: v.label, y: v.value })),
|
|
31977
31978
|
interpolation: "monotoneX",
|
|
31978
31979
|
style: { data: { strokeWidth: 2 } }
|
|
31979
31980
|
},
|
|
31980
|
-
|
|
31981
|
+
_
|
|
31981
31982
|
)) }),
|
|
31982
|
-
(!n.variant || n.variant === "stackedAreaChart") && /* @__PURE__ */ x.jsx(Gx, { children: s.map((
|
|
31983
|
+
(!n.variant || n.variant === "stackedAreaChart") && /* @__PURE__ */ x.jsx(Gx, { children: s.map((p, _) => /* @__PURE__ */ x.jsx(
|
|
31983
31984
|
zx,
|
|
31984
31985
|
{
|
|
31985
|
-
name: "scatter-" +
|
|
31986
|
-
data:
|
|
31987
|
-
x:
|
|
31988
|
-
y:
|
|
31986
|
+
name: "scatter-" + _,
|
|
31987
|
+
data: p.values.map((v) => ({
|
|
31988
|
+
x: v.label,
|
|
31989
|
+
y: v.value
|
|
31989
31990
|
})),
|
|
31990
|
-
size: ({ active:
|
|
31991
|
+
size: ({ active: v }) => v ? 6 : 3
|
|
31991
31992
|
},
|
|
31992
|
-
"scatter-" +
|
|
31993
|
+
"scatter-" + _
|
|
31993
31994
|
)) })
|
|
31994
31995
|
]
|
|
31995
31996
|
}
|
package/index.umd.cjs
CHANGED
|
@@ -358,7 +358,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
358
358
|
`,RWe=qt.div`
|
|
359
359
|
font-size: small;
|
|
360
360
|
line-height: 1em;
|
|
361
|
-
`,G_t="",FWe=q7e("voronoi","cursor");function BWe(n){const{allowZero:e,xLabel:t,yLabel:i,minDomain:r,onlyIntegerTicks:o}=n;let{groups:s}=n;s=e?s:s.filter(
|
|
361
|
+
`,G_t="",FWe=q7e("voronoi","cursor");function BWe(n){var d,h,f,g;const{allowZero:e,xLabel:t,yLabel:i,minDomain:r,onlyIntegerTicks:o}=n;let{groups:s}=n;s=e?s:s.filter(m=>{for(const p of m.values)if(p.value!==0)return!0;return!1});const a=s.filter(m=>!!m.label).map((m,p)=>({childName:`${p}`,name:m.label,symbol:{fill:m.color,type:"square"}})),l=s.filter(m=>!!m.label).map(m=>({label:m.label,count:m.values.reduce((p,_)=>p+_.value,0),color:m.color,link:m.link})),c=E.useMemo(()=>{const m={};for(const p of s)for(const _ of p.values)m[_.label]=(m[_.label]??0)+_.value;return Object.values(m).reduce((p,_)=>_>p?_:p,0)},[s]),u={top:(((d=n.padding)==null?void 0:d.top)??4)+16,bottom:(((h=n.padding)==null?void 0:h.bottom)??32)+16,left:(((f=n.padding)==null?void 0:f.left)??12)+Math.round(c).toString().length*9.5+16,right:(((g=n.padding)==null?void 0:g.right)??0)+16};return x.jsxs("div",{style:{height:n.height,display:"flex",flexGrow:1,minHeight:"100%"},children:[i&&x.jsx(VWe,{label:i,paddingTop:u.top,paddingBottom:u.bottom}),x.jsxs("div",{style:{display:"flex",flexDirection:"column",flexGrow:1,gap:16},children:[x.jsx("div",{style:{height:"100%",margin:-16},children:x.jsx(Jy,{className:"page-chart",children:m=>x.jsxs(rA,{padding:u,colorScale:s.map(p=>p.color),height:m.height,width:m.width,minDomain:r,maxDomain:{y:c},containerComponent:x.jsx(FWe,{cursorDimension:"x",labels:p=>p.datum.y.toString(),labelComponent:x.jsx(SA,{title:p=>p.x,legendData:a,cornerRadius:8}),mouseFollowTooltips:!0,voronoiDimension:"x",voronoiPadding:50}),children:[x.jsx(DS,{fixLabelOverlap:!0}),x.jsx(DS,{dependentAxis:!0,showGrid:!0,tickFormat:o===!1?void 0:p=>Number.isInteger(p)?p:""}),n.variant==="lineChart"&&s.map((p,_)=>x.jsx(DA,{name:_.toString(),style:{data:{strokeWidth:3,stroke:p.color}},data:p.values.map(v=>({x:v.label,y:v.value})),interpolation:"monotoneX"},_)),n.variant==="lineChart"&&s.map((p,_)=>x.jsx(IS,{name:"scatter-"+_,data:p.values.map(v=>({x:v.label,y:v.value})),size:({active:v})=>v?6:3,style:{data:{fill:p.color}}},"scatter-"+_)),(!n.variant||n.variant==="stackedAreaChart")&&x.jsx(FS,{children:s.map((p,_)=>x.jsx(dA,{name:_.toString(),data:p.values.map(v=>({x:v.label,y:v.value})),interpolation:"monotoneX",style:{data:{strokeWidth:2}}},_))}),(!n.variant||n.variant==="stackedAreaChart")&&x.jsx(FS,{children:s.map((p,_)=>x.jsx(IS,{name:"scatter-"+_,data:p.values.map(v=>({x:v.label,y:v.value})),size:({active:v})=>v?6:3},"scatter-"+_))})]})})}),t&&x.jsx(WWe,{label:t,paddingLeft:u.left,paddingRight:u.right}),x.jsx(IWe,{id:n.id??"chart",legend:l,horizontal:!0})]})]})}function WWe(n){return x.jsx("span",{style:{maxHeight:"1em",display:"flex",justifyContent:"center",alignItems:"center",paddingLeft:n.paddingLeft,paddingRight:n.paddingRight},children:n.label})}function VWe(n){return x.jsx("div",{style:{maxWidth:"1em",display:"flex",justifyContent:"center",alignItems:"center",paddingLeft:n.paddingLeft,paddingBottom:n.paddingBottom,paddingTop:n.paddingTop,marginRight:16},children:x.jsx("span",{style:{transform:"rotate(-90deg)",whiteSpace:"nowrap"},children:n.label})})}function $We(n){const{title:e,...t}=n;return x.jsx(ew,{width:"xxs",height:"xs",...t,children:x.jsx(R.CardBody,{children:x.jsx(R.Bullseye,{children:x.jsxs(R.Flex,{direction:{default:"column"},spaceItems:{default:"spaceItemsSm"},alignItems:{default:"alignItemsCenter"},children:[x.jsx("span",{style:{fontSize:"xxx-large",lineHeight:1},children:n.count}),x.jsx(R.Title,{headingLevel:"h3",size:"xl",children:e})]})})})})}function jWe(n){const{t:e}=Ji(),{steps:t}=n;return t.every(r=>r.isComplete)?x.jsx(x.Fragment,{}):x.jsx(ew,{title:e("Getting Started"),width:"xxl",children:x.jsx(R.CardBody,{children:x.jsxs(R.Stack,{hasGutter:!0,children:[x.jsx("div",{children:n.children}),x.jsx(R.ProgressStepper,{children:t.map((r,o)=>x.jsx(R.ProgressStep,{titleId:`${r.title}-${o}`,id:`${r.title}-${o}`,variant:r.isComplete?"success":"info",description:r.description,children:x.jsx(lh.Link,{to:r.to,children:r.title})},o))})]})})})}const HWe=qt.div`
|
|
362
362
|
width: 12px;
|
|
363
363
|
height: 12px;
|
|
364
364
|
`;function lq(n){const{t:e}=Ji(),{total:t}=n;return t!==0?x.jsx(Jy,{children:i=>x.jsx(MS,{...n,width:i.width,height:i.height,padding:{top:0,left:0,right:i.width-i.height,bottom:0}})}):x.jsx(Jy,{children:i=>x.jsx(yA,{constrainToVisibleArea:!0,width:i.width,height:i.height,data:{x:e("Resource"),y:t},legendData:[{name:e(`Total: ${t}`)}],legendOrientation:"vertical",colorScale:[sE],title:t.toString(),padding:{top:0,left:0,right:i.width-i.height,bottom:0}})})}function zWe(n){const{t:e}=Ji(),{title:t,items:i,loading:r}=n,o=i.reduce((s,a)=>s+a.count,0);return x.jsx(ew,{title:t,width:"sm",height:"xs",linkText:n.linkText,to:n.to,children:x.jsx(R.CardBody,{children:r===!0?x.jsxs(R.Split,{hasGutter:!0,children:[x.jsx(R.SplitItem,{children:x.jsx(R.Skeleton,{shape:"circle",width:"100px"})}),x.jsx(R.SplitItem,{style:{marginTop:"auto",marginBottom:"auto"},children:x.jsx(R.Flex,{direction:{default:"column"},spaceItems:{default:"spaceItemsMd"},children:i.map(s=>x.jsx(R.FlexItem,{children:x.jsxs(R.Flex,{spaceItems:{default:"spaceItemsSm"},children:[x.jsx(R.FlexItem,{children:x.jsx(HWe,{children:x.jsx(R.Skeleton,{shape:"square",width:"12",height:"12"})})}),x.jsx(R.FlexItem,{grow:{default:"grow"},children:x.jsx(R.Skeleton,{shape:"square",width:"70px",height:"14px"})})]})},s.label))})})]}):x.jsx(lq,{ariaDesc:e("Dashboard resource count"),ariaTitle:e("Dashboard resource count"),constrainToVisibleArea:!0,data:i.map(s=>({x:s.label,y:s.count})),title:o.toString(),colorScale:i.map(s=>s.color),legendData:i.map(s=>({name:`${s.label}: ${s.count}`})),legendOrientation:"vertical",legendPosition:"right",total:o})})})}const UWe=qt.button`
|