sbwb-ds 2.3.2 → 2.3.4

package/dist/sbwb-ds.js

@@ -3607,7 +3607,6 @@ const j = Pe`
     `};
 `, U2e = X.div`
   ${j}
-  position: relative;
   width: ${({ wrapperWidth: e }) => e ?? "fit-content"};
   height: ${({ wrapperHeight: e }) => e ?? "fit-content"};
 
@@ -6456,7 +6455,6 @@ const z3e = X.div`
   display: flex;
   flex: 1 1 0%;
   flex-wrap: wrap;
-  position: relative;
   overflow: hidden;
   min-height: 1em;
   box-sizing: border-box;
@@ -82989,34 +82987,36 @@ const GFe = X.div`
   animation: c = !0,
   chartRenderer: u = "svg",
   radius: d = i ? 155 : 140,
-  customOption: f,
-  radarColors: h,
-  fontAxisSize: p = i ? 14 : 12,
-  symbolSize: v = 12,
-  legendBottom: g = i ? "350px" : "10px",
-  legendLeft: m = i ? "500px" : "0"
+  showLegend: f = !0,
+  customOption: h,
+  radarColors: p,
+  fontAxisSize: v = i ? 14 : 12,
+  symbolSize: g = 12,
+  legendBottom: m = i ? "350px" : "10px",
+  legendLeft: y = i ? "500px" : "0"
 }) => {
-  const y = rt(null), b = rt(null), x = [
+  var H;
+  const b = rt(null), x = rt(null), S = [
     w.colors.auxiliariesColors.colorAuxOneDark,
     w.colors.auxiliariesColors.colorAuxThreeLight,
     w.colors.auxiliariesColors.colorAuxOneLight,
     w.colors.auxiliariesColors.colorAuxTwoLight
-  ], S = h && h.length > 0 ? h : x;
+  ], M = p && p.length > 0 ? p : S;
   Ot(() => {
-    if (y.current && !b.current) {
-      const L = $x(y.current, null, {
+    if (b.current && !x.current) {
+      const D = $x(b.current, null, {
         renderer: u,
         width: o,
         height: l
-      }), H = {
+      }), T = {
         tooltip: {
           trigger: "item",
-          formatter: function(T) {
+          formatter: function(N) {
             return gge(
               /* @__PURE__ */ $(
                 JFe,
                 {
-                  params: T,
+                  params: N,
                   radarIndicator: a
                 }
               )
@@ -83033,7 +83033,7 @@ const GFe = X.div`
           indicator: a,
           axisName: {
             color: w.colors.neutralColors.colorNeutralCloudy,
-            fontSize: p,
+            fontSize: v,
             fontFamily: w.fonts.fontFamily.fontFamilyPrimary,
             padding: [2, 2]
           },
@@ -83062,8 +83062,8 @@ const GFe = X.div`
               width: 2
             },
             data: t,
-            symbolSize: v,
-            color: S
+            symbolSize: g,
+            color: M
           },
           {
             name: "Max Points",
@@ -83082,20 +83082,20 @@ const GFe = X.div`
             },
             data: [
               {
-                value: a.map((T) => T.max),
+                value: a.map((N) => N.max),
                 name: "Max Point"
               }
             ]
           }
         ]
-      }, D = f ? { ...H, ...f } : H;
-      return L.setOption(D), b.current = L, () => {
-        b.current && (b.current.dispose(), b.current = null);
+      }, R = h ? { ...T, ...h } : T;
+      return D.setOption(R), x.current = D, () => {
+        x.current && (x.current.dispose(), x.current = null);
       };
     }
   }, [
     t,
-    f,
+    h,
     r,
     a,
     c,
@@ -83103,35 +83103,36 @@ const GFe = X.div`
     u,
     o,
     l,
-    S
+    M
   ]);
-  const M = (L) => {
-    b.current && (b.current.dispatchAction({
+  const L = (D) => {
+    x.current && (x.current.dispatchAction({
       type: "downplay",
-      seriesName: L
-    }), b.current.dispatchAction({
+      seriesName: D
+    }), x.current.dispatchAction({
       type: "legendToggleSelect",
-      name: L
+      name: D
     }));
   };
-  return /* @__PURE__ */ $(GFe, { id: e, showDetails: n, ref: y, children: /* @__PURE__ */ $(
+  return /* @__PURE__ */ $(GFe, { id: e, showDetails: n, ref: b, children: !f || // @ts-ignore
+  !((H = h == null ? void 0 : h.legend) != null && H.show) && /* @__PURE__ */ $(
     UFe,
     {
       expanded: i,
-      bottom: g,
-      left: m,
+      bottom: m,
+      left: y,
       children: /* @__PURE__ */ $(
         Kz,
         {
-          legendData: t.map((L) => ({ name: L.name })).filter((L) => L.name !== "Max Point"),
-          myChart: b.current,
-          lineColors: S,
+          legendData: t.map((D) => ({ name: D.name })).filter((D) => D.name !== "Max Point"),
+          myChart: x.current,
+          lineColors: M,
           scrollDirection: i ? "vertical" : "horizontal",
           maxRows: i ? void 0 : 3,
           maxColumns: i ? 1 : void 0,
           width: "100%",
           height: "auto",
-          onClickLegend: M,
+          onClickLegend: L,
           ...s
         }
       )

package/dist/sbwb-ds.umd.cjs

@@ -313,7 +313,6 @@ See https://s-c.sh/2BAXzed for more info.`),window["__styled-components-init__"]
     `};
 `,fG=X.div`
   ${j}
-  position: relative;
   width: ${({wrapperWidth:e})=>e??"fit-content"};
   height: ${({wrapperHeight:e})=>e??"fit-content"};
 
@@ -1501,7 +1500,6 @@ See https://s-c.sh/2BAXzed for more info.`),window["__styled-components-init__"]
   display: flex;
   flex: 1 1 0%;
   flex-wrap: wrap;
-  position: relative;
   overflow: hidden;
   min-height: 1em;
   box-sizing: border-box;
@@ -5961,7 +5959,7 @@ echarts.use([`+F+"]);":"Unknown series "+P))}return}if(d==="tooltip"){if(S){proc
   height: 8px;
   background-color: ${({color:e})=>e};
   border-radius: 50%;
-`,jz=({legendData:e,lineColors:t=[w.colors.auxiliariesColors.colorAuxOneDark,w.colors.auxiliariesColors.colorAuxOneLight,w.colors.auxiliariesColors.colorAuxTwoDark,w.colors.auxiliariesColors.colorAuxTwoLight,w.colors.auxiliariesColors.colorAuxThreeDark,w.colors.auxiliariesColors.colorAuxThreeLight,w.colors.auxiliariesColors.colorAuxFourDark,w.colors.auxiliariesColors.colorAuxFourLight,w.colors.auxiliariesColors.colorAuxFiveDark,w.colors.auxiliariesColors.colorAuxFiveLight],myChart:r,scrollDirection:n="horizontal",maxRows:a=3,maxColumns:i=1,width:o,height:l,onClickLegend:s,...c})=>{const[u,d]=oe.useState(e.reduce((h,p)=>({...h,[p.name]:!0}),{})),f=oe.useCallback((h,p)=>{s(h),d(g=>({...g,[h]:!g[h]}))},[s]);return R(RMe,{scrollDirection:n,maxRows:a,maxColumns:i,width:o,height:l,...c,children:e.map((h,p)=>{const g=u[h.name];return _e(FMe,{style:{opacity:g?1:.5},onClick:()=>f(h.name,p),children:[R(OMe,{color:g?t[p]||"#000":"#d3d3d3"}),R(NMe,{scrollDirection:n,style:{color:g?"#000":"#d3d3d3"},children:h.name})]},h.name)})})},BMe=({id:e,data:t,seriesName:r,showDetails:n=!0,radarIndicator:a,expanded:i=!1,chartWidth:o,chartHeight:l,legendProps:s,animation:c=!0,chartRenderer:u="svg",radius:d=i?155:140,customOption:f,radarColors:h,fontAxisSize:p=i?14:12,symbolSize:g=12,legendBottom:C=i?"350px":"10px",legendLeft:m=i?"500px":"0"})=>{const y=oe.useRef(null),S=oe.useRef(null),b=[w.colors.auxiliariesColors.colorAuxOneDark,w.colors.auxiliariesColors.colorAuxThreeLight,w.colors.auxiliariesColors.colorAuxOneLight,w.colors.auxiliariesColors.colorAuxTwoLight],x=h&&h.length>0?h:b;oe.useEffect(()=>{if(y.current&&!S.current){const L=Dy(y.current,null,{renderer:u,width:o,height:l}),D={tooltip:{trigger:"item",formatter:function(T){return J2e(R(PMe,{params:T,radarIndicator:a}))},borderColor:w.colors.neutralColors.colorNeutralLighest},legend:{show:!1},radar:{radius:d,indicator:a,axisName:{color:w.colors.neutralColors.colorNeutralCloudy,fontSize:p,fontFamily:w.fonts.fontFamily.fontFamilyPrimary,padding:[2,2]},splitLine:{lineStyle:{color:w.colors.neutralColors.colorNeutralCleanest}},axisLine:{lineStyle:{color:w.colors.neutralColors.colorNeutralCleanest}},shape:"polygon",splitArea:{show:!1},center:i?["38%","60%"]:["50%","50%"]},series:[{name:r,type:"radar",animation:c,lineStyle:{width:2},data:t,symbolSize:g,color:x},{name:"Max Points",type:"radar",tooltip:{show:!1},lineStyle:{width:0,opacity:0},symbol:"rect",symbolSize:8,itemStyle:{color:w.colors.neutralColors.colorNeutralSnow,borderColor:w.colors.neutralColors.colorNeutralCloudy,borderWidth:1,opacity:1},data:[{value:a.map(T=>T.max),name:"Max Point"}]}]},H=f?{...D,...f}:D;return L.setOption(H),S.current=L,()=>{S.current&&(S.current.dispose(),S.current=null)}}},[t,f,r,a,c,d,u,o,l,x]);const _=L=>{S.current&&(S.current.dispatchAction({type:"downplay",seriesName:L}),S.current.dispatchAction({type:"legendToggleSelect",name:L}))};return R(kMe,{id:e,showDetails:n,ref:y,children:R(VMe,{expanded:i,bottom:C,left:m,children:R(jz,{legendData:t.map(L=>({name:L.name})).filter(L=>L.name!=="Max Point"),myChart:S.current,lineColors:x,scrollDirection:i?"vertical":"horizontal",maxRows:i?void 0:3,maxColumns:i?1:void 0,width:"100%",height:"auto",onClickLegend:_,...s})})})},ZMe=X.div`
+`,jz=({legendData:e,lineColors:t=[w.colors.auxiliariesColors.colorAuxOneDark,w.colors.auxiliariesColors.colorAuxOneLight,w.colors.auxiliariesColors.colorAuxTwoDark,w.colors.auxiliariesColors.colorAuxTwoLight,w.colors.auxiliariesColors.colorAuxThreeDark,w.colors.auxiliariesColors.colorAuxThreeLight,w.colors.auxiliariesColors.colorAuxFourDark,w.colors.auxiliariesColors.colorAuxFourLight,w.colors.auxiliariesColors.colorAuxFiveDark,w.colors.auxiliariesColors.colorAuxFiveLight],myChart:r,scrollDirection:n="horizontal",maxRows:a=3,maxColumns:i=1,width:o,height:l,onClickLegend:s,...c})=>{const[u,d]=oe.useState(e.reduce((h,p)=>({...h,[p.name]:!0}),{})),f=oe.useCallback((h,p)=>{s(h),d(g=>({...g,[h]:!g[h]}))},[s]);return R(RMe,{scrollDirection:n,maxRows:a,maxColumns:i,width:o,height:l,...c,children:e.map((h,p)=>{const g=u[h.name];return _e(FMe,{style:{opacity:g?1:.5},onClick:()=>f(h.name,p),children:[R(OMe,{color:g?t[p]||"#000":"#d3d3d3"}),R(NMe,{scrollDirection:n,style:{color:g?"#000":"#d3d3d3"},children:h.name})]},h.name)})})},BMe=({id:e,data:t,seriesName:r,showDetails:n=!0,radarIndicator:a,expanded:i=!1,chartWidth:o,chartHeight:l,legendProps:s,animation:c=!0,chartRenderer:u="svg",radius:d=i?155:140,showLegend:f=!0,customOption:h,radarColors:p,fontAxisSize:g=i?14:12,symbolSize:C=12,legendBottom:m=i?"350px":"10px",legendLeft:y=i?"500px":"0"})=>{var D;const S=oe.useRef(null),b=oe.useRef(null),x=[w.colors.auxiliariesColors.colorAuxOneDark,w.colors.auxiliariesColors.colorAuxThreeLight,w.colors.auxiliariesColors.colorAuxOneLight,w.colors.auxiliariesColors.colorAuxTwoLight],_=p&&p.length>0?p:x;oe.useEffect(()=>{if(S.current&&!b.current){const H=Dy(S.current,null,{renderer:u,width:o,height:l}),T={tooltip:{trigger:"item",formatter:function(F){return J2e(R(PMe,{params:F,radarIndicator:a}))},borderColor:w.colors.neutralColors.colorNeutralLighest},legend:{show:!1},radar:{radius:d,indicator:a,axisName:{color:w.colors.neutralColors.colorNeutralCloudy,fontSize:g,fontFamily:w.fonts.fontFamily.fontFamilyPrimary,padding:[2,2]},splitLine:{lineStyle:{color:w.colors.neutralColors.colorNeutralCleanest}},axisLine:{lineStyle:{color:w.colors.neutralColors.colorNeutralCleanest}},shape:"polygon",splitArea:{show:!1},center:i?["38%","60%"]:["50%","50%"]},series:[{name:r,type:"radar",animation:c,lineStyle:{width:2},data:t,symbolSize:C,color:_},{name:"Max Points",type:"radar",tooltip:{show:!1},lineStyle:{width:0,opacity:0},symbol:"rect",symbolSize:8,itemStyle:{color:w.colors.neutralColors.colorNeutralSnow,borderColor:w.colors.neutralColors.colorNeutralCloudy,borderWidth:1,opacity:1},data:[{value:a.map(F=>F.max),name:"Max Point"}]}]},P=h?{...T,...h}:T;return H.setOption(P),b.current=H,()=>{b.current&&(b.current.dispose(),b.current=null)}}},[t,h,r,a,c,d,u,o,l,_]);const L=H=>{b.current&&(b.current.dispatchAction({type:"downplay",seriesName:H}),b.current.dispatchAction({type:"legendToggleSelect",name:H}))};return R(kMe,{id:e,showDetails:n,ref:S,children:!f||!((D=h==null?void 0:h.legend)!=null&&D.show)&&R(VMe,{expanded:i,bottom:m,left:y,children:R(jz,{legendData:t.map(H=>({name:H.name})).filter(H=>H.name!=="Max Point"),myChart:b.current,lineColors:_,scrollDirection:i?"vertical":"horizontal",maxRows:i?void 0:3,maxColumns:i?1:void 0,width:"100%",height:"auto",onClickLegend:L,...s})})})},ZMe=X.div`
   ${j}
   position: relative;
   width: 100%;

package/dist/src/presentation/components/molecules/ChartRadar/index.d.ts

@@ -19,6 +19,7 @@ export interface ChartRadarElementProps {
     legendBottom?: string;
     legendLeft?: string;
     legendProps?: ChartLegendsProps;
+    showLegend?: boolean;
 }
 export interface Indicator {
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",

package/src/presentation/components/atoms/Select/styles.ts

@@ -172,7 +172,6 @@ export const SelectValue = styled.div<SelectValueProps>`
   display: flex;
   flex: 1 1 0%;
   flex-wrap: wrap;
-  position: relative;
   overflow: hidden;
   min-height: 1em;
   box-sizing: border-box;

package/src/presentation/components/atoms/Tooltip/styles.ts

@@ -9,7 +9,6 @@ interface TooltipWrapperProps {
 
 export const TooltipWrapper = styled.div<TooltipWrapperProps>`
   ${resetStyles}
-  position: relative;
   width: ${({ wrapperWidth }) => wrapperWidth ?? 'fit-content'};
   height: ${({ wrapperHeight }) => wrapperHeight ?? 'fit-content'};
 

package/src/presentation/components/molecules/ChartRadar/ChartRadar.stories.tsx

@@ -169,6 +169,32 @@ const Template = (args) => {
         expanded={expanded}
         expandButton={() => setExpanded(!expanded)}
         key={expanded ? 'expanded' : 'collapsed'}
+        // customOption={{
+        //   legend: {
+        //     show: true,
+        //     icon: 'circle',
+        //     data: data
+        //       .map((item) => item.name)
+        //       .filter((name) => name !== 'Max Point'),
+        //     itemGap: 20,
+        //     itemHeight: 8,
+        //     itemWidth: 8,
+        //     formatter: function (name) {
+        //       return '  ' + name + '              ';
+        //     },
+        //     textStyle: {
+        //       fontFamily: sg.fonts.fontFamily.fontFamilyPrimary,
+        //       fontSize: 12,
+        //       fontWeight: 400,
+        //       lineHeight: 14,
+        //       color: sg.colors.neutralColors.colorNeutralCloudy,
+        //     },
+        //     orient: 'vertical',
+        //     bottom: 15,
+        //     left: 0,
+        //     height: 60,
+        //   },
+        // }}
       />
 
       <ChartInfo>

package/src/presentation/components/molecules/ChartRadar/index.tsx

@@ -25,6 +25,7 @@ export interface ChartRadarElementProps {
   legendBottom?: string;
   legendLeft?: string;
   legendProps?: ChartLegendsProps;
+  showLegend?: boolean;
 }
 
 export interface Indicator {
@@ -52,6 +53,7 @@ const RadarChart: React.FC<ChartRadarElementProps> = ({
   animation = true,
   chartRenderer = 'svg',
   radius = expanded ? 155 : 140,
+  showLegend = true,
   customOption,
   radarColors,
   fontAxisSize = expanded ? 14 : 12,
@@ -200,26 +202,30 @@ const RadarChart: React.FC<ChartRadarElementProps> = ({
 
   return (
     <C.RadarChart id={id} showDetails={showDetails} ref={chartRef}>
-      <C.LegendsWrapper
-        expanded={expanded}
-        bottom={legendBottom}
-        left={legendLeft}
-      >
-        <ChartLegends
-          legendData={data
-            .map((item) => ({ name: item.name }))
-            .filter((item) => item.name !== 'Max Point')}
-          myChart={myChartRef.current}
-          lineColors={colors}
-          scrollDirection={expanded ? 'vertical' : 'horizontal'}
-          maxRows={expanded ? undefined : 3}
-          maxColumns={expanded ? 1 : undefined}
-          width="100%"
-          height="auto"
-          onClickLegend={dispatch}
-          {...legendProps}
-        />
-      </C.LegendsWrapper>
+      {!showLegend ||
+        // @ts-ignore
+        (!customOption?.legend?.show && (
+          <C.LegendsWrapper
+            expanded={expanded}
+            bottom={legendBottom}
+            left={legendLeft}
+          >
+            <ChartLegends
+              legendData={data
+                .map((item) => ({ name: item.name }))
+                .filter((item) => item.name !== 'Max Point')}
+              myChart={myChartRef.current}
+              lineColors={colors}
+              scrollDirection={expanded ? 'vertical' : 'horizontal'}
+              maxRows={expanded ? undefined : 3}
+              maxColumns={expanded ? 1 : undefined}
+              width="100%"
+              height="auto"
+              onClickLegend={dispatch}
+              {...legendProps}
+            />
+          </C.LegendsWrapper>
+        ))}
     </C.RadarChart>
   );
 };