@ansible/ansible-ui-framework 2.4.411 → 2.4.412
Sign up to get free protection for your applications and to get access to all the features.
- 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`
|