@foodpilot/foods 2.18.0 → 2.18.2
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 -5
- package/dist/components/Chart/ScatterPlot/ScatterPlotHoverOverlay.d.ts +2 -0
- package/dist/components/Chart/ScatterPlot/ScatterPlotHoverOverlay.js +13 -12
- package/dist/components/Chart/ScatterPlot/ScatterPlotPoints.js +4 -4
- package/dist/components/Chart/ScatterPlot/ScatterPlotTooltip.js +13 -13
- 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 +2 -2
|
@@ -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,7 @@
|
|
|
1
|
-
import{jsxs as t,jsx as i}from"react/jsx-runtime";import{useMemo as o,useState as e,useRef as n,useCallback as
|
|
1
|
+
import{jsxs as t,jsx as i}from"react/jsx-runtime";import{useMemo as o,useState as e,useRef as n,useCallback as r,useEffect as a}from"react";import{useTheme as s,Box as l}from"@mui/material";import{ResponsiveContainer as m,ScatterChart as c,CartesianGrid as h,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 P,CHART_MARGIN_RIGHT as D,CHART_MARGIN_TOP as k}from"./utils.js";import L from"i18next";const F=F=>{const T=s(),{values:S,xMin:E,xMax:b,yMin:z,yMax:C,valueFormatterFn:I=T.numbers.valueFormatterFn,precision:j,language:O,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}=o(()=>g(S,T.custom.dataviz.colorsWithExtra),[S,T.custom.dataviz.colorsWithExtra]),ot=o(()=>y(S,T.custom.dataviz.colorsWithExtra,tt),[S,T.custom.dataviz.colorsWithExtra,tt]),{xDomain:et,yDomain:nt}=o(()=>{const t=S.flatMap(t=>t.data);if(0===t.length)return{xDomain:void 0!==E&&void 0!==b?[E,b]:[0,100],yDomain:void 0!==z&&void 0!==C?[z,C]:[0,100]};const i=t.map(t=>t.x),o=t.map(t=>t.y),e=Math.min(...i),n=Math.max(...i),r=Math.min(...o),a=Math.max(...o);return{xDomain:void 0!==E&&void 0!==b?[E,b]:[Math.max(0,e),n],yDomain:void 0!==z&&void 0!==C?[z,C]:[Math.max(0,r),a]}},[S,E,b,z,C]),[rt,at]=e(!0),st=n(null),lt=n(null),[mt,ct]=e({height:0,width:0}),ht=O??L.language,dt="number"==typeof j?Math.min(100,Math.max(0,j)):void 0,pt=r(t=>I(t,dt),[I,dt]);a(()=>{const t=setTimeout(()=>{at(!1)},M);return()=>clearTimeout(t)},[]),a(()=>{const t=st.current;if(!t)return;const i=(t,i)=>{ct(o=>o.width===t&&o.height===i?o:{width:t,height:i})},o=t.getBoundingClientRect();i(o.width,o.height);const e=new ResizeObserver(([t])=>{t&&i(t.contentRect.width,t.contentRect.height)});return e.observe(t),()=>e.disconnect()},[]);const ut=!!(q&&null!==X&&Y&&tt[X]),vt=null!==$?tt[$]:void 0;/* @__PURE__ */
|
|
2
|
+
return t(l,{onClick:t=>{const i=t.target;if(i.classList.contains("recharts-dot"))return;const o=lt.current;o&&o.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(c,{margin:{top:k,right:D,left:P,bottom:w},children:[
|
|
2
3
|
/* @__PURE__ */i(h,{strokeDasharray:"4 4",stroke:T.palette.divider}),
|
|
3
|
-
/* @__PURE__ */i(d,{type:"number",dataKey:"x",domain:
|
|
4
|
-
/* @__PURE__ */i(p,{type:"number",dataKey:"y",domain:
|
|
5
|
-
/* @__PURE__ */i(v,{hover:B,valueFormatterFn:
|
|
6
|
-
/* @__PURE__ */i(f,{groupedData:
|
|
4
|
+
/* @__PURE__ */i(d,{type:"number",dataKey:"x",domain:et,tickLine:!1,axisLine:{stroke:T.palette.divider},tick:{fontFamily:"Montserrat",fontSize:14,style:{transform:`translateY(${T.spacing(2)})`}},tickFormatter:pt,allowDecimals:!0}),
|
|
5
|
+
/* @__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"}}),
|
|
6
|
+
/* @__PURE__ */i(v,{hover:B,valueFormatterFn:I,precision:dt,language:ht,xDomain:et,yDomain:nt,pointColor:vt?.seriesColor,isPointSelected:ut&&$===X}),
|
|
7
|
+
/* @__PURE__ */i(f,{groupedData:ot,allPoints:tt,hoveredIndex:$,pinnedIndex:X,isTooltipActive:ut,isAnimationActive:rt,shouldShowLabels:it,containerWidth:mt.width,onPointEnter:G,onPointLeave:N,onPointClick:(t,i,o,e)=>{e.stopPropagation(),J(t,i,o)}})]})}),!!(q&&null!==X&&Y&&tt[X])&&/* @__PURE__ */i(x,{ref:lt,point:tt[X],coordinate:Y,series:S,valueFormatterFn:I,precision:j,unit:W,xUnit:R,yUnit:U,textOptions:A,showSeriesInTooltip:H,handleDismissTooltip:_,tooltipOptions:K,onTooltipEnter:Q,onTooltipLeave:V})]})};export{F as ScatterPlotCore};
|
|
@@ -6,6 +6,8 @@ type OverlayProps = {
|
|
|
6
6
|
language?: string;
|
|
7
7
|
xDomain: number[];
|
|
8
8
|
yDomain: number[];
|
|
9
|
+
pointColor?: string;
|
|
10
|
+
isPointSelected?: boolean;
|
|
9
11
|
};
|
|
10
12
|
export declare const ScatterPlotHoverOverlay: (props: OverlayProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
11
13
|
export {};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import{jsxs as
|
|
2
|
-
return t
|
|
3
|
-
/* @__PURE__ */r(
|
|
4
|
-
|
|
5
|
-
/* @__PURE__ */
|
|
6
|
-
/* @__PURE__ */
|
|
7
|
-
/* @__PURE__ */r("
|
|
8
|
-
/* @__PURE__ */r(
|
|
9
|
-
|
|
10
|
-
/* @__PURE__ */
|
|
11
|
-
/* @__PURE__ */r("
|
|
12
|
-
/* @__PURE__ */r("
|
|
1
|
+
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{useTheme as i}from"@mui/material";import{usePlotArea as n,ReferenceLine as o,DefaultZIndexes as a,ZIndexLayer as l,Dot as x}from"recharts";import{POINT_RADIUS as d}from"./utils.js";const s=a.cursorLine,p=a.label+1,m=m=>{const h=i(),c=n(),{hover:y,valueFormatterFn:f=h.numbers.valueFormatterFn,precision:u,xDomain:g,yDomain:v,pointColor:k,isPointSelected:X=!1}=m;if(!y||!c)return null;const Y=e=>parseFloat(h.spacing(e)),z=Y(1),E=Y(2.5),F=Y(3.75),W=Y(0),b=h.shape.borderRadius??4,w=h.custom.grey[2800],I=h.palette.common.white,D=e=>f(e,u),S=e=>Math.max(F,Math.round(12*e.length*.6)+2*z),j=D(y.dataY),A=S(j),B=c.x-W-A-15,M=y.pixelY-E/2,C=B+A/2,L=M+E/2+1,P=D(y.dataX),R=S(P),q=y.pixelX-R/2,G=c.y+c.height+20,H=q+R/2,J=G+E/2+1;/* @__PURE__ */
|
|
2
|
+
return e(t,{children:[
|
|
3
|
+
/* @__PURE__ */r(o,{segment:[{x:g[0],y:y.dataY},{x:y.dataX,y:y.dataY}],stroke:h.palette.text.primary,style:{pointerEvents:"none"},zIndex:s}),
|
|
4
|
+
/* @__PURE__ */r(o,{segment:[{x:y.dataX,y:v[0]},{x:y.dataX,y:y.dataY}],stroke:h.palette.text.primary,style:{pointerEvents:"none"},zIndex:s}),k&&/* @__PURE__ */r(l,{zIndex:a.activeDot,children:/* @__PURE__ */r(x,{cx:y.pixelX,cy:y.pixelY,r:d,fill:k,"data-scatter-hovered-point":"true",style:{pointerEvents:"none",...X?{filter:"drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5))",stroke:"#fff",strokeWidth:2}:{filter:"none"}}})}),
|
|
5
|
+
/* @__PURE__ */e(l,{zIndex:p,children:[
|
|
6
|
+
/* @__PURE__ */e("g",{"data-scatter-hover-marker":"y",style:{pointerEvents:"none"},children:[
|
|
7
|
+
/* @__PURE__ */r("line",{x1:c.x,y1:y.pixelY,x2:c.x-15,y2:y.pixelY,stroke:h.palette.text.primary,strokeWidth:1}),
|
|
8
|
+
/* @__PURE__ */r("rect",{x:B,y:M,width:A,height:E,fill:w,rx:b}),
|
|
9
|
+
/* @__PURE__ */r("text",{x:C,y:L,fill:I,fontSize:12,fontWeight:600,textAnchor:"middle",dominantBaseline:"middle",children:j})]}),
|
|
10
|
+
/* @__PURE__ */e("g",{"data-scatter-hover-marker":"x",style:{pointerEvents:"none"},children:[
|
|
11
|
+
/* @__PURE__ */r("line",{x1:y.pixelX,y1:G+E,x2:y.pixelX,y2:G-E,stroke:h.palette.text.primary,strokeWidth:1}),
|
|
12
|
+
/* @__PURE__ */r("rect",{x:q,y:G,width:R,height:E,fill:w,rx:b}),
|
|
13
|
+
/* @__PURE__ */r("text",{x:H,y:J,fill:I,fontSize:12,fontWeight:600,textAnchor:"middle",dominantBaseline:"middle",children:P})]})]})]})};export{m as ScatterPlotHoverOverlay};
|
|
@@ -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 i}from"recharts";import{useTheme as r}from"@mui/material";import{ANIMATION_DURATION as l,DISABLE_ANIMATIONS_THRESHOLD_POINTS as a,POINT_RADIUS as
|
|
2
|
-
return t("g",{style:{pointerEvents:"none"},children:/* @__PURE__ */t("text",{x:u,y:y+1,fill:
|
|
3
|
-
return t(e,{children:
|
|
4
|
-
return t(i,{cx:n,cy:o,r:r,fill:
|
|
1
|
+
import{jsx as t,Fragment as e}from"react/jsx-runtime";import{Scatter as n,LabelList as o,Dot as i}from"recharts";import{useTheme as r}from"@mui/material";import{ANIMATION_DURATION as l,DISABLE_ANIMATIONS_THRESHOLD_POINTS as a,POINT_RADIUS as c,calculateLabelPosition as s,LABEL_FONT_SIZE as p}from"./utils.js";const d=d=>{const{groupedData:f,allPoints:m,hoveredIndex:u,pinnedIndex:y,isTooltipActive:x,isAnimationActive:h,shouldShowLabels:b,containerWidth:v,onPointEnter:g,onPointLeave:A,onPointClick:I}=d,k=r(),P=e=>{const{x:n,y:o,cx:i,cy:r,value:l,payload:a}=e,c=a?.label,d=c||("number"==typeof l?String(l):(l??"").toString());if(!d)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}=s(f,m,d,v);/* @__PURE__ */
|
|
2
|
+
return t("g",{style:{pointerEvents:"none"},children:/* @__PURE__ */t("text",{x:u,y:y+1,fill:k.palette.text.primary,fontSize:p,fontWeight:600,textAnchor:x,dominantBaseline:"middle",children:d})})};/* @__PURE__ */
|
|
3
|
+
return t(e,{children:f.map(e=>/* @__PURE__ */t(n,{isAnimationActive:!1,fill:e.color,data:e.points.map(t=>{const n=null!==u&&t.pointIndex!==u;return{...t,label:t.label,fill:e.color,opacity:n?.4:1,r:c}}),shape:e=>{const{cx:n,cy:o,r:r,fill:c}=e,{pointIndex:s,payload:p}=e,d=p?.pointIndex??s,f=null!==u&&d!==u,b={cursor:"pointer",...void 0!==d&&d===y&&x?{filter:"drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5))",stroke:"#fff",strokeWidth:2}:{filter:"none"}};/* @__PURE__ */
|
|
4
|
+
return t(i,{cx:n,cy:o,r:r,fill:c,"data-scatter-point":"true",style:a<=m.length?b:{...b,transform:`scale(${h?0:1})`,transformOrigin:"50% 50%",opacity:f?.4:1,transition:`all ${l}ms cubic-bezier(0.86, 0, 0.07, 1)`},onMouseEnter:()=>{if("number"==typeof d){const t=m[d];t&&g(t,d,{x:n,y:o})}},onMouseLeave:()=>{A()},onClick:(t,e)=>{if("number"==typeof d){const t=m[d];t&&I(t,d,{x:n,y:o},e)}}})},children:b&&/* @__PURE__ */t(o,{dataKey:"label",content:P})},e.seriesId))})};export{d as ScatterPlotPoints};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import{jsxs as t,jsx as n}from"react/jsx-runtime";import{useTheme as i,Stack as e,Typography as o,Box as r,Link as a,Button as s}from"@mui/material";import{calculateTooltipPosition as c,getTooltipContainerStyles as l}from"../shared/tooltipPositioning.js";import{forwardRef as p}from"react";import{FoodsIcon as d}from"../../Icons/FoodsIcon.js";import{FoodsTooltip as g}from"../../Tooltip/FoodsTooltip.js";const h={x:0,y:-5},
|
|
2
|
-
/* @__PURE__ */t(e,{direction:"row",alignItems:"center",justifyContent:"space-between",spacing:
|
|
3
|
-
/* @__PURE__ */n(o,{variant:"h4",lineHeight:
|
|
4
|
-
/* @__PURE__ */n(
|
|
5
|
-
/* @__PURE__ */t(e,{pt:
|
|
6
|
-
/* @__PURE__ */n(o,{variant:"number-small",lineHeight:
|
|
7
|
-
/* @__PURE__ */n(o,{variant:"body2",lineHeight:
|
|
8
|
-
/* @__PURE__ */n(o,{variant:"body2",lineHeight:
|
|
9
|
-
/* @__PURE__ */n(o,{variant:"number-small",lineHeight:
|
|
10
|
-
/* @__PURE__ */n(o,{variant:"body2",lineHeight:
|
|
11
|
-
/* @__PURE__ */n(r,{sx:{width:
|
|
12
|
-
/* @__PURE__ */n(o,{variant:"body2",lineHeight:
|
|
13
|
-
return n(r,{ref:
|
|
1
|
+
import{jsxs as t,jsx as n}from"react/jsx-runtime";import{useTheme as i,Stack as e,Typography as o,Box as r,Link as a,Button as s}from"@mui/material";import{calculateTooltipPosition as c,getTooltipContainerStyles as l}from"../shared/tooltipPositioning.js";import{forwardRef as p}from"react";import{FoodsIcon as d}from"../../Icons/FoodsIcon.js";import{FoodsTooltip as g}from"../../Tooltip/FoodsTooltip.js";const h={x:0,y:-5},m=p((p,m)=>{const u=i(),{point:x,coordinate:b,valueFormatterFn:f=u.numbers.valueFormatterFn,precision:y,unit:v,xUnit:w,yUnit:C,textOptions:I,showSeriesInTooltip:k=!0,tooltipOptions:j,onTooltipEnter:z,onTooltipLeave:F,handleDismissTooltip:H}=p,T=x.seriesName,E=C??v,P=w??v,L=I?.for??"for",M=()=>/* @__PURE__ */n(r,{role:"button",onClick:()=>H?.(),sx:{cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",padding:u.spacing(.25),height:u.spacing(2.75),width:u.spacing(2.75),marginTop:-.5,marginRight:-1,borderRadius:"50%","&:hover":{color:u.palette.common.white,backgroundColor:"text.secondary",boxShadow:"0px 0px 4px rgba(0, 0, 0, 0.1)"}},children:/* @__PURE__ */n(r,{sx:{display:"flex",transform:"rotate(45deg)"},children:/* @__PURE__ */n(d,{icon:"plus",size:2})})}),R=/* @__PURE__ */t(e,{direction:"column",spacing:u.spacing(.5),pb:u.spacing(.25),onClick:t=>t.stopPropagation(),onMouseLeave:()=>F?.(),sx:{pointerEvents:"auto"},children:[
|
|
2
|
+
/* @__PURE__ */t(e,{direction:"row",alignItems:"center",justifyContent:"space-between",spacing:u.spacing(1),useFlexGap:!0,children:[
|
|
3
|
+
/* @__PURE__ */n(o,{variant:"h4",lineHeight:u.spacing(2),children:x.label}),
|
|
4
|
+
/* @__PURE__ */n(M,{})]}),
|
|
5
|
+
/* @__PURE__ */t(e,{pt:u.spacing(1),direction:"row",spacing:u.spacing(.5),alignItems:"center",flexWrap:"wrap",children:[
|
|
6
|
+
/* @__PURE__ */n(o,{variant:"number-small",lineHeight:u.spacing(2),color:"text.primary",children:f(x.y,y)}),
|
|
7
|
+
/* @__PURE__ */n(o,{variant:"body2",lineHeight:u.spacing(2),color:"text.secondary",children:E?` ${E}`:""}),
|
|
8
|
+
/* @__PURE__ */n(o,{variant:"body2",lineHeight:u.spacing(2),color:"text.primary",children:L}),
|
|
9
|
+
/* @__PURE__ */n(o,{variant:"number-small",lineHeight:u.spacing(2),color:"text.primary",children:f(x.x,y)}),
|
|
10
|
+
/* @__PURE__ */n(o,{variant:"body2",lineHeight:u.spacing(2),color:"text.secondary",children:P?` ${P}`:""})]}),x.additionalContent&&/* @__PURE__ */n(r,{sx:{pt:u.spacing(2)},children:x.additionalContent}),T&&k&&/* @__PURE__ */n(e,{direction:"row",alignItems:"flex-end",justifyContent:"flex-end",spacing:u.spacing(1),pt:u.spacing(2),children:/* @__PURE__ */t(e,{direction:"row",alignItems:"center",spacing:u.spacing(1),children:[
|
|
11
|
+
/* @__PURE__ */n(r,{sx:{width:u.spacing(1.5),height:u.spacing(1.5),borderRadius:"50%",backgroundColor:x.seriesColor}}),
|
|
12
|
+
/* @__PURE__ */n(o,{variant:"body2",lineHeight:u.spacing(2),color:"text.secondary",fontWeight:500,children:T})]})}),j?.button?j.button.href?/* @__PURE__ */n(a,{href:j.button.href,target:"_blank",rel:"noopener noreferrer",children:/* @__PURE__ */n(s,{sx:{color:u.palette.text.primary,mt:u.spacing(2)},variant:j?.button?.variant,size:j?.button?.size,startIcon:j?.button?.startIcon,onClick:t=>{t.stopPropagation(),j?.button?.onClick?.()},children:j.button.text})}):/* @__PURE__ */n(s,{sx:{mt:u.spacing(2)},variant:j?.button?.variant,size:j?.button?.size,startIcon:j?.button?.startIcon,onClick:t=>{t.stopPropagation(),j?.button?.onClick?.()},children:j?.button?.text}):null]}),O=c({coordinate:{x:b.xValue,y:b.yValue},placement:"top",offset:h});/* @__PURE__ */
|
|
13
|
+
return n(r,{ref:m,style:{position:"absolute",...O,zIndex:u.zIndex.tooltip,pointerEvents:"auto"},onMouseEnter:z,onMouseLeave:F,children:/* @__PURE__ */n(g,{width:"inherit",title:R,placement:"top",arrow:!0,open:!0,sx:{...l()},children:/* @__PURE__ */n("div",{style:{width:1,height:1,visibility:"hidden",pointerEvents:"none"}})})})});export{m as ScatterPlotTooltip};
|
|
@@ -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(),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';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foodpilot/foods",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "2.18.
|
|
4
|
+
"version": "2.18.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/main.js",
|
|
7
7
|
"module": "./dist/main.js",
|
|
@@ -223,7 +223,7 @@
|
|
|
223
223
|
"react": "^18.0.0 || ^19.0.0",
|
|
224
224
|
"react-dom": "^18.0.0 || ^19.0.0",
|
|
225
225
|
"react-i18next": "^16.5.4",
|
|
226
|
-
"recharts": "^3.
|
|
226
|
+
"recharts": "^3.5.0"
|
|
227
227
|
},
|
|
228
228
|
"peerDependenciesMeta": {
|
|
229
229
|
"@mui/lab": {
|