@foodpilot/foods 2.18.0 → 2.18.1
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/dist/components/Cards/ScoreOverviewCard/ScoreOverviewCard.d.ts +1 -1
- package/dist/components/Cards/ScoreOverviewCard/ScoreOverviewCard.js +1 -2
- package/dist/components/Chart/ScatterPlot/ScatterPlotCore.js +6 -6
- package/dist/components/Chart/ScatterPlot/ScatterPlotPoints.js +4 -4
- package/dist/components/Chart/ScatterPlot/useScatterPlotInteraction.js +1 -1
- package/dist/components/Chart/ScoreDistribution/ScoreDistribution.d.ts +1 -1
- package/dist/components/Chart/ScoreDistribution/ScoreDistribution.js +7 -8
- package/dist/components/Chart/ScoreDistribution/ScoreDistribution.types.d.ts +7 -1
- package/dist/components/Chart/ScoreDistribution/ScoreDistributionRow.js +9 -9
- package/dist/components/Chart/ScoreDistribution/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -18,7 +18,7 @@ export type ScoreOverviewCardVariationAction = {
|
|
|
18
18
|
type ScoreOverviewCardBaseProps = {
|
|
19
19
|
disabled?: boolean;
|
|
20
20
|
icon: keyof IconMapping;
|
|
21
|
-
level
|
|
21
|
+
level?: ScoreOverviewCardLevel;
|
|
22
22
|
onSelect: NonNullable<ButtonBaseProps["onClick"]>;
|
|
23
23
|
selected: boolean;
|
|
24
24
|
selectionLabel: string;
|
|
@@ -4,8 +4,7 @@ return e(r,{sx:{backgroundColor:p.selected?u.palette.primary[800]:u.custom.grey[
|
|
|
4
4
|
/* @__PURE__ */e(r,{sx:{boxSizing:"border-box",gap:u.spacing(3),height:"100%",padding:u.spacing(3),pointerEvents:"none",position:"relative",width:"100%",zIndex:"auto"},children:[
|
|
5
5
|
/* @__PURE__ */e(r,{sx:{gap:u.spacing(1),minWidth:0},children:[
|
|
6
6
|
/* @__PURE__ */e(r,{direction:"row",alignItems:"flex-start",justifyContent:"space-between",children:[
|
|
7
|
-
/* @__PURE__ */i(n,{"aria-hidden":!0,sx:{alignItems:"center",backgroundColor:u.palette.primary[50],borderRadius:u.spacing(1.5),color:u.palette.primary[600],display:"flex",height:u.custom.scoreOverviewCard.icon.containerSize,justifyContent:"center",padding:u.spacing(.5),width:u.custom.scoreOverviewCard.icon.containerSize},children:/* @__PURE__ */i(c,{icon:p.icon,size:u.custom.scoreOverviewCard.icon.glyphSize})}),
|
|
8
|
-
/* @__PURE__ */i(d,{size:"display",label:p.level.label,endIcon:"information",colors:p.level.colors,sx:{"& .MuiButton-endIcon":{padding:0},borderWidth:0,paddingInlineEnd:u.spacing(.5),pointerEvents:"auto",position:"relative",zIndex:3}})]}),
|
|
7
|
+
/* @__PURE__ */i(n,{"aria-hidden":!0,sx:{alignItems:"center",backgroundColor:u.palette.primary[50],borderRadius:u.spacing(1.5),color:u.palette.primary[600],display:"flex",height:u.custom.scoreOverviewCard.icon.containerSize,justifyContent:"center",padding:u.spacing(.5),width:u.custom.scoreOverviewCard.icon.containerSize},children:/* @__PURE__ */i(c,{icon:p.icon,size:u.custom.scoreOverviewCard.icon.glyphSize})}),p.level&&/* @__PURE__ */i(d,{size:"display",label:p.level.label,endIcon:"information",colors:p.level.colors,sx:{"& .MuiButton-endIcon":{padding:0},borderWidth:0,paddingInlineEnd:u.spacing(.5),pointerEvents:"auto",position:"relative",zIndex:3}})]}),
|
|
9
8
|
/* @__PURE__ */e(r,{sx:{minWidth:0},children:[
|
|
10
9
|
/* @__PURE__ */i(a,{component:"h3",noWrap:!0,title:p.title,variant:"big-semibold",sx:{color:m},children:p.title}),
|
|
11
10
|
/* @__PURE__ */e(r,{direction:"row",alignItems:"center",sx:{gap:u.spacing(.5),minWidth:0},children:[
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{jsxs as t,jsx as i}from"react/jsx-runtime";import{useMemo as
|
|
2
|
-
/* @__PURE__ */i(
|
|
3
|
-
/* @__PURE__ */i(d,{type:"number",dataKey:"x",domain:ot,tickLine:!1,axisLine:{stroke:T.palette.divider},tick:{fontFamily:"Montserrat",fontSize:14,style:{transform:`translateY(${T.spacing(2)})`}},tickFormatter:
|
|
4
|
-
/* @__PURE__ */i(p,{type:"number",dataKey:"y",domain:
|
|
5
|
-
/* @__PURE__ */i(v,{hover:B,valueFormatterFn:j,precision:
|
|
6
|
-
/* @__PURE__ */i(f,{groupedData:
|
|
1
|
+
import{jsxs as t,jsx as i}from"react/jsx-runtime";import{useMemo as e,useState as o,useRef as n,useCallback as a,useEffect as r}from"react";import{useTheme as s,Box as l}from"@mui/material";import{ResponsiveContainer as m,ScatterChart as h,CartesianGrid as c,XAxis as d,YAxis as p}from"recharts";import{useScatterPlotInteraction as u}from"./useScatterPlotInteraction.js";import{ScatterPlotHoverOverlay as v}from"./ScatterPlotHoverOverlay.js";import{ScatterPlotTooltip as x}from"./ScatterPlotTooltip.js";import{ScatterPlotPoints as f}from"./ScatterPlotPoints.js";import{processScatterPlotData as g,createGroupedData as y,ANIMATION_DURATION as M,CHART_MARGIN_BOTTOM as w,CHART_MARGIN_LEFT as D,CHART_MARGIN_RIGHT as P,CHART_MARGIN_TOP as k}from"./utils.js";import L from"i18next";const F=F=>{const T=s(),{values:E,xMin:S,xMax:b,yMin:z,yMax:I,valueFormatterFn:j=T.numbers.valueFormatterFn,precision:O,language:C,unit:W,xUnit:R,yUnit:U,textOptions:A,showSeriesInTooltip:H=!0,tooltipOptions:K}=F,{hoveredIndex:$,hover:B,pinnedIndex:X,pinnedHover:Y,isPinned:q,handlePointEnter:G,handlePointClick:J,handlePointLeave:N,handleTooltipEnter:Q,handleTooltipLeave:V,handleChartMouseLeave:Z,handleDismissTooltip:_}=u(),{allPoints:tt,shouldShowLabels:it}=e(()=>g(E,T.custom.dataviz.colorsWithExtra),[E,T.custom.dataviz.colorsWithExtra]),et=e(()=>y(E,T.custom.dataviz.colorsWithExtra,tt),[E,T.custom.dataviz.colorsWithExtra,tt]),{xDomain:ot,yDomain:nt}=e(()=>{const t=E.flatMap(t=>t.data);if(0===t.length)return{xDomain:void 0!==S&&void 0!==b?[S,b]:[0,100],yDomain:void 0!==z&&void 0!==I?[z,I]:[0,100]};const i=t.map(t=>t.x),e=t.map(t=>t.y),o=Math.min(...i),n=Math.max(...i),a=Math.min(...e),r=Math.max(...e);return{xDomain:void 0!==S&&void 0!==b?[S,b]:[Math.max(0,o),n],yDomain:void 0!==z&&void 0!==I?[z,I]:[Math.max(0,a),r]}},[E,S,b,z,I]),[at,rt]=o(!0),st=n(null),lt=n(null),[mt,ht]=o({height:0,width:0}),ct=C??L.language,dt="number"==typeof O?Math.min(100,Math.max(0,O)):void 0,pt=a(t=>j(t,dt),[j,dt]);return r(()=>{const t=setTimeout(()=>{rt(!1)},M);return()=>clearTimeout(t)},[]),r(()=>{const t=st.current;if(!t)return;const i=(t,i)=>{ht(e=>e.width===t&&e.height===i?e:{width:t,height:i})},e=t.getBoundingClientRect();i(e.width,e.height);const o=new ResizeObserver(([t])=>{t&&i(t.contentRect.width,t.contentRect.height)});return o.observe(t),()=>o.disconnect()},[]),/* @__PURE__ */t(l,{onClick:t=>{const i=t.target;if(i.classList.contains("recharts-dot"))return;const e=lt.current;e&&e.contains(i)||_()},onMouseLeave:Z,ref:st,sx:{position:"relative",width:"100%",height:"100%"},children:[mt.width>0&&mt.height>0&&/* @__PURE__ */i(m,{width:"100%",height:"100%",initialDimension:mt,children:/* @__PURE__ */t(h,{margin:{top:k,right:P,left:D,bottom:w},children:[
|
|
2
|
+
/* @__PURE__ */i(c,{strokeDasharray:"4 4",stroke:T.palette.divider}),
|
|
3
|
+
/* @__PURE__ */i(d,{type:"number",dataKey:"x",domain:ot,tickLine:!1,axisLine:{stroke:T.palette.divider},tick:{fontFamily:"Montserrat",fontSize:14,style:{transform:`translateY(${T.spacing(2)})`}},tickFormatter:pt,allowDecimals:!0}),
|
|
4
|
+
/* @__PURE__ */i(p,{type:"number",dataKey:"y",domain:nt,tickLine:!1,axisLine:{stroke:T.palette.divider},tick:{fontFamily:"Montserrat",fontSize:14,style:{transform:`translateX(-${T.spacing(2)})`,pointerEvents:"none"}},tickFormatter:pt,allowDecimals:!0,style:{pointerEvents:"none"}}),
|
|
5
|
+
/* @__PURE__ */i(v,{hover:B,valueFormatterFn:j,precision:dt,language:ct,xDomain:ot,yDomain:nt}),
|
|
6
|
+
/* @__PURE__ */i(f,{groupedData:et,allPoints:tt,hoveredIndex:$,pinnedIndex:X,isTooltipActive:!!(q&&null!==X&&Y&&tt[X]),isAnimationActive:at,shouldShowLabels:it,containerWidth:mt.width,onPointEnter:G,onPointLeave:N,onPointClick:(t,i,e,o)=>{o.stopPropagation(),J(t,i,e)}})]})}),!!(q&&null!==X&&Y&&tt[X])&&/* @__PURE__ */i(x,{ref:lt,point:tt[X],coordinate:Y,series:E,valueFormatterFn:j,precision:O,unit:W,xUnit:R,yUnit:U,textOptions:A,showSeriesInTooltip:H,handleDismissTooltip:_,tooltipOptions:K,onTooltipEnter:Q,onTooltipLeave:V})]})};export{F as ScatterPlotCore};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as t,Fragment as e}from"react/jsx-runtime";import{Scatter as n,LabelList as o,Dot as
|
|
2
|
-
return t("g",{style:{pointerEvents:"none"},children:/* @__PURE__ */t("text",{x:u,y:y+1,fill:P.palette.text.primary,fontSize:
|
|
3
|
-
return t(e,{children:
|
|
4
|
-
return t(
|
|
1
|
+
import{jsx as t,Fragment as e}from"react/jsx-runtime";import{Scatter as n,LabelList as o,DefaultZIndexes as i,Dot as r}from"recharts";import{useTheme as l}from"@mui/material";import{ANIMATION_DURATION as a,DISABLE_ANIMATIONS_THRESHOLD_POINTS as c,POINT_RADIUS as s,calculateLabelPosition as p,LABEL_FONT_SIZE as d}from"./utils.js";const f=f=>{const{groupedData:m,allPoints:u,hoveredIndex:y,pinnedIndex:x,isTooltipActive:h,isAnimationActive:b,shouldShowLabels:v,containerWidth:g,onPointEnter:I,onPointLeave:A,onPointClick:k}=f,P=l(),S=e=>{const{x:n,y:o,cx:i,cy:r,value:l,payload:a}=e,c=a?.label,s=c||("number"==typeof l?String(l):(l??"").toString());if(!s)return null;const f="number"==typeof i?i:"number"==typeof n?n:void 0,m="number"==typeof r?r:"number"==typeof o?o:void 0;if(void 0===f||void 0===m)return null;const{x:u,y:y,anchor:x}=p(f,m,s,g);/* @__PURE__ */
|
|
2
|
+
return t("g",{style:{pointerEvents:"none"},children:/* @__PURE__ */t("text",{x:u,y:y+1,fill:P.palette.text.primary,fontSize:d,fontWeight:600,textAnchor:x,dominantBaseline:"middle",children:s})})};/* @__PURE__ */
|
|
3
|
+
return t(e,{children:m.map(e=>/* @__PURE__ */t(n,{isAnimationActive:!1,fill:e.color,data:e.points.map(t=>{const n=null!==y&&t.pointIndex!==y;return{...t,label:t.label,fill:e.color,opacity:n?.4:1,r:s}}),shape:e=>{const{cx:n,cy:o,r:i,fill:l}=e,{pointIndex:s,payload:p}=e,d=p?.pointIndex??s,f=null!==y&&d!==y,m={cursor:"pointer",...void 0!==d&&d===x&&h?{filter:"drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5))",stroke:"#fff",strokeWidth:2}:{filter:"none"}};/* @__PURE__ */
|
|
4
|
+
return t(r,{cx:n,cy:o,r:i,fill:l,"data-scatter-point":"true",style:c<=u.length?m:{...m,transform:`scale(${b?0:1})`,transformOrigin:"50% 50%",opacity:f?.4:1,transition:`all ${a}ms cubic-bezier(0.86, 0, 0.07, 1)`},onMouseEnter:()=>{if("number"==typeof d){const t=u[d];t&&I(t,d,{x:n,y:o})}},onMouseLeave:()=>{A()},onClick:(t,e)=>{if("number"==typeof d){const t=u[d];t&&k(t,d,{x:n,y:o},e)}}})},children:v&&/* @__PURE__ */t(o,{dataKey:"label",content:S,zIndex:i.line})},e.seriesId))})};export{f as ScatterPlotPoints};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useState as l,useRef as e,useEffect as n,useCallback as
|
|
1
|
+
import{useState as l,useRef as e,useEffect as n,useCallback as a}from"react";const t=()=>{const[t,u]=l(null),[r,x]=l(null),[i,o]=l(null),[d,c]=l(null),[p,y]=l(!1),h=e(null),s=e(!1);n(()=>{s.current=p},[p]);const V=a(()=>{h.current&&(clearTimeout(h.current),h.current=null)},[]),X=a((l,e,n)=>{V(),y(!1),u(e);const a={xValue:n?.x??l.x,yValue:n?.y??l.y,dataX:l.x,dataY:l.y,pixelX:n?.x??l.x,pixelY:n?.y??l.y};x(l=>l&&l.xValue===a.xValue&&l.yValue===a.yValue&&l.dataX===a.dataX&&l.dataY===a.dataY&&l.pixelX===a.pixelX&&l.pixelY===a.pixelY?l:a)},[V]),Y=a((l,e,n)=>{V(),o(e),c({xValue:n?.x??l.x,yValue:n?.y??l.y,dataX:l.x,dataY:l.y,pixelX:n?.x??l.x,pixelY:n?.y??l.y}),y(!0)},[V]),v=a(()=>{V(),s.current||(u(null),x(null))},[V]),m=a(()=>{V()},[V]),T=a(()=>{V(),s.current||(h.current=setTimeout(()=>{u(null),x(null)},1e3))},[V]),P=a(()=>{s.current||(V(),u(null),x(null))},[V]),L=a(()=>{V(),o(null),c(null),x(null),y(!1)},[V]);return{hoveredIndex:t,hover:r,pinnedIndex:i,pinnedHover:d,isPinned:p,handlePointEnter:X,handlePointClick:Y,handlePointLeave:v,handleTooltipEnter:m,handleTooltipLeave:T,handleChartMouseLeave:P,handleDismissTooltip:L}};export{t as useScatterPlotInteraction};
|
|
@@ -7,4 +7,4 @@ import { ScoreDistributionProps } from './ScoreDistribution.types';
|
|
|
7
7
|
* open `13154:68496`. Consumers own data adaptation, localization, loading,
|
|
8
8
|
* and navigation; Foods owns the complete visual and interaction contract.
|
|
9
9
|
*/
|
|
10
|
-
export declare const ScoreDistribution: ({ displayByLabel, emptyLabel, getCollapseLabel, getExpandLabel, items, modes, onModeChange, selectedMode, summary, }: ScoreDistributionProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const ScoreDistribution: ({ displayByLabel, emptyLabel, getCollapseLabel, getExpandLabel, items, modes, onModeChange, selectedMode, showSummary, summary, }: ScoreDistributionProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useTheme as r,Stack as o,Typography as a,Button as t,Box as s}from"@mui/material";import{ScoreDistributionRow as n}from"./ScoreDistributionRow.js";import{ScoreDistributionSummary as d}from"./ScoreDistributionSummary.js";import{getScoreDistributionScale as l}from"./scoreDistributionScale.js";const c=({displayByLabel:c,emptyLabel:m,getCollapseLabel:p,getExpandLabel:g,items:b,modes:u,onModeChange:h,selectedMode:x,summary:
|
|
2
|
-
return e(o,{"data-testid":"score-distribution",gap:
|
|
3
|
-
/* @__PURE__ */e(o,{direction:"row",alignItems:"center",flexWrap:"wrap",gap:
|
|
1
|
+
import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useTheme as r,Stack as o,Typography as a,Button as t,Box as s}from"@mui/material";import{ScoreDistributionRow as n}from"./ScoreDistributionRow.js";import{ScoreDistributionSummary as d}from"./ScoreDistributionSummary.js";import{getScoreDistributionScale as l}from"./scoreDistributionScale.js";const c=({displayByLabel:c,emptyLabel:m,getCollapseLabel:p,getExpandLabel:g,items:b,modes:u,onModeChange:h,selectedMode:x,showSummary:y=!0,summary:f})=>{const w=r(),v=l(b);/* @__PURE__ */
|
|
2
|
+
return e(o,{"data-testid":"score-distribution",gap:w.spacing(3),children:[
|
|
3
|
+
/* @__PURE__ */e(o,{direction:"row",alignItems:"center",flexWrap:"wrap",gap:w.spacing(2),children:[
|
|
4
4
|
/* @__PURE__ */i(a,{variant:"body-semibold",children:c}),
|
|
5
|
-
/* @__PURE__ */i(o,{direction:"row",flexWrap:"wrap",gap:
|
|
6
|
-
/* @__PURE__ */e(s,{sx:{alignItems:"flex-start",display:"flex",flexWrap:"wrap",gap:
|
|
7
|
-
/* @__PURE__ */i(
|
|
8
|
-
/* @__PURE__ */
|
|
9
|
-
/* @__PURE__ */i(s,{"aria-hidden":!0,sx:{borderColor:f.custom.strokes.containerDivider.color,borderRadius:f.spacing(1.5),borderStyle:f.custom.strokes.containerDivider.style,borderWidth:f.custom.strokes.containerDivider.width,boxSizing:"border-box",inset:0,pointerEvents:"none",position:"absolute"}})]})]})]})};export{c as ScoreDistribution};
|
|
5
|
+
/* @__PURE__ */i(o,{direction:"row",flexWrap:"wrap",gap:w.spacing(2),children:u.map(e=>/* @__PURE__ */i(t,{variant:x===e.id?"black-filled":"white-filled","aria-pressed":x===e.id,onClick:()=>h(e.id),children:e.label},e.id))})]}),
|
|
6
|
+
/* @__PURE__ */e(s,{sx:{alignItems:"flex-start",display:"flex",flexWrap:"wrap",gap:w.spacing(3)},children:[y&&/* @__PURE__ */i(d,{summary:f}),
|
|
7
|
+
/* @__PURE__ */e(o,{"data-testid":"score-distribution-breakdown",gap:w.spacing(2),sx:{backgroundColor:w.custom.grey[100],borderRadius:w.spacing(1.5),boxShadow:w.custom.shadows.grey,isolation:"isolate",flex:`1 1 ${w.custom.scoreDetail.summaryWidth}`,minWidth:0,padding:w.spacing(2),position:"relative"},children:[b.length>0?b.map((e,r)=>/* @__PURE__ */i(n,{getCollapseLabel:p,getExpandLabel:g,item:e,isLast:r===b.length-1,mode:x,scale:v},`${x}:${e.id}`)):/* @__PURE__ */i(a,{variant:"body-regular",color:w.custom.grey[2500],children:m}),
|
|
8
|
+
/* @__PURE__ */i(s,{"aria-hidden":!0,sx:{borderColor:w.custom.strokes.containerDivider.color,borderRadius:w.spacing(1.5),borderStyle:w.custom.strokes.containerDivider.style,borderWidth:w.custom.strokes.containerDivider.width,boxSizing:"border-box",inset:0,pointerEvents:"none",position:"absolute"}})]})]})]})};export{c as ScoreDistribution};
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import { IconMapping } from '../../Icons';
|
|
2
2
|
import { NumberWithUnitValue } from '../../Number/NumberWithUnit';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
3
4
|
export type ScoreDistributionMode = "lifecycle" | "subscores" | "impacts";
|
|
4
5
|
export type ScoreDistributionIconTone = "dataviz-1" | "dataviz-2" | "dataviz-3" | "dataviz-4" | "dataviz-5" | "dataviz-6" | "dataviz-7" | "dataviz-9" | "dataviz-13" | "green";
|
|
6
|
+
export type ScoreDistributionInformation = {
|
|
7
|
+
label: string;
|
|
8
|
+
tooltip: ReactNode;
|
|
9
|
+
};
|
|
5
10
|
export type ScoreDistributionItem = {
|
|
6
11
|
children: readonly ScoreDistributionItem[];
|
|
7
12
|
formattedValue: string;
|
|
@@ -11,7 +16,7 @@ export type ScoreDistributionItem = {
|
|
|
11
16
|
value: number | null;
|
|
12
17
|
icon?: keyof IconMapping;
|
|
13
18
|
iconTone?: ScoreDistributionIconTone;
|
|
14
|
-
|
|
19
|
+
information?: ScoreDistributionInformation;
|
|
15
20
|
};
|
|
16
21
|
export type ScoreDistributionModeOption = {
|
|
17
22
|
id: ScoreDistributionMode;
|
|
@@ -32,5 +37,6 @@ export type ScoreDistributionProps = {
|
|
|
32
37
|
modes: readonly ScoreDistributionModeOption[];
|
|
33
38
|
onModeChange: (mode: ScoreDistributionMode) => void;
|
|
34
39
|
selectedMode: ScoreDistributionMode;
|
|
40
|
+
showSummary?: boolean;
|
|
35
41
|
summary: ScoreDistributionSummary;
|
|
36
42
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import{jsxs as i,jsx as
|
|
2
|
-
return i(a,{gap:z?f.spacing(0===
|
|
1
|
+
import{jsxs as i,jsx as t}from"react/jsx-runtime";import{useTheme as e,Stack as a,Box as o,Typography as r}from"@mui/material";import{useState as n}from"react";import{FoodsIcon as s}from"../../Icons/FoodsIcon.js";import{getScoreDistributionScale as c}from"./scoreDistributionScale.js";import{FoodsIconButton as d}from"../../Button/FoodsIconButton.js";const l=(i,t)=>({lifecycle:t.custom.scoreDetail.lifecycleBreakdownWidth,subscores:t.custom.scoreDetail.subscoreBreakdownWidth,impacts:t.custom.scoreDetail.impactBreakdownWidth}[i]),m=({depth:u=0,getCollapseLabel:h,getExpandLabel:p,item:g,isLast:b,mode:x,scale:v})=>{const f=e(),[z,w]=n(!1),W=g.value??0,k=W<0,y=`${g.label} ${g.formattedValue}${"%"===g.unit?"":" "}${g.unit}`,I=g.children.length>0,B=v.range>0?Math.min(100,Math.abs(W)/v.range*100):0,S=k||0===W&&v.range>0&&!v.hasPositiveValue,C=((i,t)=>{switch(i){case"dataviz-1":return t.custom.dataviz.colors[1];case"dataviz-2":return t.custom.dataviz.colors[2];case"dataviz-3":return t.custom.dataviz.colors[3];case"dataviz-4":return t.custom.dataviz.colors[4];case"dataviz-5":return t.custom.dataviz.colors[5];case"dataviz-6":return t.custom.dataviz.colors[6];case"dataviz-7":return t.custom.dataviz.colors[7];case"dataviz-9":return t.custom.dataviz.extra[9];case"dataviz-13":return t.custom.dataviz.extra[13];case"green":return{main:t.custom.green[600],variant:{100:t.custom.status.green.surface}};default:return null}})(g.iconTone,f);/* @__PURE__ */
|
|
2
|
+
return i(a,{gap:z?f.spacing(0===u?2:1):0,sx:{paddingBottom:0!==u||b?0:f.spacing(2),position:"relative"},children:[
|
|
3
3
|
/* @__PURE__ */i(a,{direction:{xs:"column",md:"row"},alignItems:{xs:"stretch",md:"center"},flexWrap:"wrap",gap:f.spacing(2),children:[
|
|
4
|
-
/* @__PURE__ */i(a,{direction:"row",alignItems:"center",gap:f.spacing(1.5),minWidth:0,sx:{boxSizing:"border-box",flexBasis:{xs:"auto",md:f.custom.scoreDetail.summaryWidth},flexGrow:{xs:0,md:1},paddingInlineStart:
|
|
5
|
-
/* @__PURE__ */
|
|
6
|
-
/* @__PURE__ */i(a,{direction:"row",alignItems:"center",gap:
|
|
7
|
-
/* @__PURE__ */i(a,{direction:"row",alignItems:"center",gap:f.spacing(2),flexShrink:1,minWidth:0,sx:{maxWidth:"100%",width:l(
|
|
8
|
-
/* @__PURE__ */
|
|
4
|
+
/* @__PURE__ */i(a,{direction:"row",alignItems:"center",gap:f.spacing(1.5),minWidth:0,sx:{boxSizing:"border-box",flexBasis:{xs:"auto",md:f.custom.scoreDetail.summaryWidth},flexGrow:{xs:0,md:1},paddingInlineStart:u>0?f.spacing(4):0,width:{xs:"100%",md:"auto"}},children:[I?/* @__PURE__ */t(d,{size:"xs",icon:z?"arrowDownShort":"arrowRightShort",buttonProps:{"aria-expanded":z,"aria-label":z?h(g):p(g),onClick:()=>w(i=>!i)}}):"lifecycle"===x&&g.icon?/* @__PURE__ */t(o,{"aria-hidden":!0,sx:{flexShrink:0,height:f.spacing(3),width:f.spacing(3)}}):null,g.icon&&/* @__PURE__ */t(o,{sx:{alignItems:"center",backgroundColor:C?.variant[100],borderRadius:f.spacing(.5),color:C?.main,display:"flex",flexShrink:0,height:f.spacing(3),justifyContent:"center",width:f.spacing(3)},children:/* @__PURE__ */t(s,{icon:g.icon,size:1})}),
|
|
5
|
+
/* @__PURE__ */t(r,{variant:"body-semibold",noWrap:0===u||"lifecycle"!==x,children:g.label})]}),
|
|
6
|
+
/* @__PURE__ */i(a,{direction:"row",alignItems:"center",gap:g.information?f.spacing(2):0,flexShrink:0,minWidth:0,sx:{maxWidth:"100%"},children:[
|
|
7
|
+
/* @__PURE__ */i(a,{direction:"row",alignItems:"center",gap:f.spacing(2),flexShrink:1,minWidth:0,sx:{maxWidth:"100%",width:l(x,f)},children:[
|
|
8
|
+
/* @__PURE__ */t(o,{role:"progressbar","aria-label":y,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":B,sx:{backgroundColor:"inherit",borderRadius:0,flexShrink:1,height:f.spacing(2),maxWidth:"100%",position:"relative",width:f.custom.scoreDetail.barWidth},children:/* @__PURE__ */t(o,{"aria-hidden":!0,sx:{backgroundColor:k?f.custom.green[600]:f.palette.primary[600],borderBottomLeftRadius:k?f.spacing(.5):0,borderBottomRightRadius:k?0:f.spacing(.5),borderTopLeftRadius:k?f.spacing(.5):0,borderTopRightRadius:k?0:f.spacing(.5),height:"100%",insetInlineEnd:S?100-v.zeroPosition+"%":void 0,insetInlineStart:S?void 0:`${v.zeroPosition}%`,maxWidth:"100%",minWidth:f.custom.barChart.zeroValueWidth,position:"absolute",width:0===W?f.custom.barChart.zeroValueWidth:`${B}%`}})}),
|
|
9
9
|
/* @__PURE__ */i(a,{direction:"row",alignItems:"baseline",gap:f.spacing(.5),sx:{color:k?f.custom.green[700]:f.custom.grey[2800],minWidth:"max-content"},children:[
|
|
10
|
-
/* @__PURE__ */
|
|
11
|
-
/* @__PURE__ */
|
|
10
|
+
/* @__PURE__ */t(r,{variant:"body-semibold",children:g.formattedValue}),
|
|
11
|
+
/* @__PURE__ */t(r,{variant:"body-regular",children:g.unit})]})]}),g.information&&/* @__PURE__ */t(d,{size:"xs",icon:"information",buttonProps:{"aria-label":g.information.label},tooltip:{text:g.information.tooltip,props:{describeChild:!0}}})]})]}),z&&/* @__PURE__ */t(a,{gap:f.spacing(1),children:g.children.map((i,e)=>/* @__PURE__ */t(m,{depth:u+1,getCollapseLabel:h,getExpandLabel:p,item:i,isLast:e===g.children.length-1,mode:x,scale:c(g.children)},i.id))}),0===u&&!b&&/* @__PURE__ */t(o,{"aria-hidden":!0,sx:{borderBottomColor:f.custom.strokes.containerDivider.color,borderBottomStyle:f.custom.strokes.containerDivider.style,borderBottomWidth:f.custom.strokes.containerDivider.width,bottom:0,insetInline:0,pointerEvents:"none",position:"absolute"}})]})};export{m as ScoreDistributionRow};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { ScoreDistribution } from './ScoreDistribution';
|
|
2
|
-
export type { ScoreDistributionIconTone, ScoreDistributionItem, ScoreDistributionMode, ScoreDistributionModeOption, ScoreDistributionProps, ScoreDistributionSummary, } from './ScoreDistribution.types';
|
|
2
|
+
export type { ScoreDistributionIconTone, ScoreDistributionInformation, ScoreDistributionItem, ScoreDistributionMode, ScoreDistributionModeOption, ScoreDistributionProps, ScoreDistributionSummary, } from './ScoreDistribution.types';
|