@bikdotai/bik-component-library 0.0.760-beta.0 → 0.0.760-beta.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/cjs/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.d.ts +4 -0
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.d.ts +4 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/package.json +1 -1
|
@@ -16,6 +16,10 @@ export interface HeatMapInputInterface {
|
|
|
16
16
|
heatBoxWidth?: number;
|
|
17
17
|
heatBoxHeight?: number;
|
|
18
18
|
isLooseFit?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* If true, xLabels are center-aligned. Defaults to false (left-aligned).
|
|
21
|
+
*/
|
|
22
|
+
centerAlignXLabels?: boolean;
|
|
19
23
|
}
|
|
20
24
|
export declare enum HEAT {
|
|
21
25
|
LOW = 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,s=require("react/jsx-runtime"),o=require("react"),n=require("../../../tooltips/Tooltip.js"),r=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),c=require("./HeatMapStyled.js");exports.HEAT_GRADING_TYPE=void 0,(e=exports.HEAT_GRADING_TYPE||(exports.HEAT_GRADING_TYPE={}))[e.ABSOLUTE=0]="ABSOLUTE",e[e.RELATIVE=1]="RELATIVE",exports.HEAT=void 0,(t=exports.HEAT||(exports.HEAT={}))[t.LOW=0]="LOW",t[t.MEDIUM=1]="MEDIUM",t[t.HIGH=2]="HIGH",t[t.HIGHEST=3]="HIGHEST";const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,s=require("react/jsx-runtime"),o=require("react"),n=require("../../../tooltips/Tooltip.js"),r=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),c=require("./HeatMapStyled.js");exports.HEAT_GRADING_TYPE=void 0,(e=exports.HEAT_GRADING_TYPE||(exports.HEAT_GRADING_TYPE={}))[e.ABSOLUTE=0]="ABSOLUTE",e[e.RELATIVE=1]="RELATIVE",exports.HEAT=void 0,(t=exports.HEAT||(exports.HEAT={}))[t.LOW=0]="LOW",t[t.MEDIUM=1]="MEDIUM",t[t.HIGH=2]="HIGH",t[t.HIGHEST=3]="HIGHEST";const l={[exports.HEAT.LOW]:"#EBDBFF",[exports.HEAT.MEDIUM]:"#D2AEFF",[exports.HEAT.HIGH]:"#9E77ED",[exports.HEAT.HIGHEST]:"#5E07BB"},a=e=>{if(e>=1e3){const t=e/1e3;return`${Math.round(10*t)/10}K`}return e.toString()};exports.HEAT_COLORS=l,exports.HeatMap=e=>{let{title:t,xLabels:x,yLabels:d,values:H,heatType:j,absolutHeatValues:p,showAbsoluteValuesOnLegend:E,hideXLabels:h,customComponent:T,heatBoxWidth:L,heatBoxHeight:g,isLooseFit:A,centerAlignXLabels:O=!1}=e;const[I,y]=o.useState(),u=A?{display:"flex",justifyContent:"center",alignItems:"center"}:{};return o.useEffect((()=>{const e=Math.max(...H.flat()),t=Math.min(...H.flat());y(H.map((s=>s.map((s=>((e,t,s,o,n)=>{if(t===exports.HEAT_GRADING_TYPE.ABSOLUTE)return e<=s[0]?exports.HEAT.LOW:e<=s[1]?exports.HEAT.MEDIUM:e<=s[2]?exports.HEAT.HIGH:exports.HEAT.HIGHEST;{const t=(n-o)/4;return e<=o+t?exports.HEAT.LOW:e<=o+2*t?exports.HEAT.MEDIUM:e<=o+3*t?exports.HEAT.HIGH:exports.HEAT.HIGHEST}})(s,j,p||[],t,e))))))}),[H,p,j]),I?s.jsxs(c.HeatBoxStyled,Object.assign({isLooseFit:A},{children:[s.jsxs("div",Object.assign({className:"top-container"},{children:[s.jsxs("div",Object.assign({className:"top-container__heading"},{children:[s.jsx(r.TitleMedium,Object.assign({style:{color:i.COLORS.content.primary}},{children:t})),T]})),s.jsx("div",Object.assign({className:"top-container__legend"},{children:s.jsx(c.LegendContainer,{children:j===exports.HEAT_GRADING_TYPE.ABSOLUTE&&E&&p&&p.length>=3?s.jsxs(s.Fragment,{children:[s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.LOW]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:a(p[0])}))})]}),s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.MEDIUM]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:a(p[1])}))})]}),s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.HIGH]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:a(p[2])}))})]}),s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.HIGHEST]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:p[3]?a(p[3]):a(p[2])+"+"}))})]})]}):s.jsxs(c.LegendLabels,{children:[s.jsx(c.LegendCaption,{children:s.jsx(r.Caption,{children:"Less"})}),s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.LOW]}),s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.MEDIUM]}),s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.HIGH]}),s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.HIGHEST]}),s.jsx(c.LegendCaption,{children:s.jsx(r.Caption,{children:"More"})})]})})}))]})),s.jsx("table",Object.assign({style:u},{children:s.jsxs("tbody",{children:[d.map(((e,t)=>s.jsxs("tr",{children:[s.jsx("td",{children:s.jsx(r.BodyTiny,Object.assign({style:{color:i.COLORS.content.placeholder}},{children:e}))}),x.map(((e,o)=>s.jsx("td",{children:s.jsx(n.Tooltip,Object.assign({body:a(H[t][o]),placement:"bottom"},{children:s.jsx(c.HeatBox,{color:l[I[t][o]],heatBoxWidth:L,heatBoxHeight:g})}))},e)))]},e))),!h&&s.jsxs("tr",{children:[s.jsx("th",{}),x.map((e=>s.jsx("th",Object.assign({style:O?{textAlign:"center"}:void 0},{children:s.jsx(r.BodyTiny,Object.assign({style:O?{color:i.COLORS.content.placeholder,textAlign:"center",display:"block",width:"100%"}:{color:i.COLORS.content.placeholder}},{children:e}))}),e)))]})]})}))]})):s.jsx(s.Fragment,{})};
|
|
@@ -16,6 +16,10 @@ export interface HeatMapInputInterface {
|
|
|
16
16
|
heatBoxWidth?: number;
|
|
17
17
|
heatBoxHeight?: number;
|
|
18
18
|
isLooseFit?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* If true, xLabels are center-aligned. Defaults to false (left-aligned).
|
|
21
|
+
*/
|
|
22
|
+
centerAlignXLabels?: boolean;
|
|
19
23
|
}
|
|
20
24
|
export declare enum HEAT {
|
|
21
25
|
LOW = 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{useState as o,useEffect as c}from"react";import{Tooltip as r}from"../../../tooltips/Tooltip.js";import{TitleMedium as l,BodyCaption as i,Caption as s,BodyTiny as a}from"../../../TypographyStyle.js";import{COLORS as d}from"../../../../constants/Theme.js";import{HeatBoxStyled as h,LegendContainer as H,LegendItem as m,HeatBoxLegend as p,LegendValue as E,LegendLabels as
|
|
1
|
+
import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{useState as o,useEffect as c}from"react";import{Tooltip as r}from"../../../tooltips/Tooltip.js";import{TitleMedium as l,BodyCaption as i,Caption as s,BodyTiny as a}from"../../../TypographyStyle.js";import{COLORS as d}from"../../../../constants/Theme.js";import{HeatBoxStyled as h,LegendContainer as H,LegendItem as m,HeatBoxLegend as p,LegendValue as E,LegendLabels as g,LegendCaption as O,HeatBox as b}from"./HeatMapStyled.js";var I,y;!function(e){e[e.ABSOLUTE=0]="ABSOLUTE",e[e.RELATIVE=1]="RELATIVE"}(I||(I={})),function(e){e[e.LOW=0]="LOW",e[e.MEDIUM=1]="MEDIUM",e[e.HIGH=2]="HIGH",e[e.HIGHEST=3]="HIGHEST"}(y||(y={}));const L={[y.LOW]:"#EBDBFF",[y.MEDIUM]:"#D2AEFF",[y.HIGH]:"#9E77ED",[y.HIGHEST]:"#5E07BB"},j=e=>{if(e>=1e3){const t=e/1e3;return`${Math.round(10*t)/10}K`}return e.toString()},M=M=>{let{title:T,xLabels:u,yLabels:f,values:G,heatType:S,absolutHeatValues:B,showAbsoluteValuesOnLegend:x,hideXLabels:A,customComponent:U,heatBoxWidth:D,heatBoxHeight:W,isLooseFit:v,centerAlignXLabels:F=!1}=M;const[V,_]=o(),N=v?{display:"flex",justifyContent:"center",alignItems:"center"}:{};return c((()=>{const e=Math.max(...G.flat()),t=Math.min(...G.flat());_(G.map((n=>n.map((n=>((e,t,n,o,c)=>{if(t===I.ABSOLUTE)return e<=n[0]?y.LOW:e<=n[1]?y.MEDIUM:e<=n[2]?y.HIGH:y.HIGHEST;{const t=(c-o)/4;return e<=o+t?y.LOW:e<=o+2*t?y.MEDIUM:e<=o+3*t?y.HIGH:y.HIGHEST}})(n,S,B||[],t,e))))))}),[G,B,S]),V?n(h,Object.assign({isLooseFit:v},{children:[n("div",Object.assign({className:"top-container"},{children:[n("div",Object.assign({className:"top-container__heading"},{children:[e(l,Object.assign({style:{color:d.content.primary}},{children:T})),U]})),e("div",Object.assign({className:"top-container__legend"},{children:e(H,{children:S===I.ABSOLUTE&&x&&B&&B.length>=3?n(t,{children:[n(m,{children:[e(p,{color:L[y.LOW]}),e(E,{children:e(i,Object.assign({color:d.content.secondary},{children:j(B[0])}))})]}),n(m,{children:[e(p,{color:L[y.MEDIUM]}),e(E,{children:e(i,Object.assign({color:d.content.secondary},{children:j(B[1])}))})]}),n(m,{children:[e(p,{color:L[y.HIGH]}),e(E,{children:e(i,Object.assign({color:d.content.secondary},{children:j(B[2])}))})]}),n(m,{children:[e(p,{color:L[y.HIGHEST]}),e(E,{children:e(i,Object.assign({color:d.content.secondary},{children:B[3]?j(B[3]):j(B[2])+"+"}))})]})]}):n(g,{children:[e(O,{children:e(s,{children:"Less"})}),e(p,{color:L[y.LOW]}),e(p,{color:L[y.MEDIUM]}),e(p,{color:L[y.HIGH]}),e(p,{color:L[y.HIGHEST]}),e(O,{children:e(s,{children:"More"})})]})})}))]})),e("table",Object.assign({style:N},{children:n("tbody",{children:[f.map(((t,o)=>n("tr",{children:[e("td",{children:e(a,Object.assign({style:{color:d.content.placeholder}},{children:t}))}),u.map(((t,n)=>e("td",{children:e(r,Object.assign({body:j(G[o][n]),placement:"bottom"},{children:e(b,{color:L[V[o][n]],heatBoxWidth:D,heatBoxHeight:W})}))},t)))]},t))),!A&&n("tr",{children:[e("th",{}),u.map((t=>e("th",Object.assign({style:F?{textAlign:"center"}:void 0},{children:e(a,Object.assign({style:F?{color:d.content.placeholder,textAlign:"center",display:"block",width:"100%"}:{color:d.content.placeholder}},{children:t}))}),t)))]})]})}))]})):e(t,{})};export{y as HEAT,L as HEAT_COLORS,I as HEAT_GRADING_TYPE,M as HeatMap};
|