@bikdotai/bik-component-library 0.0.121 → 0.0.123
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/HorizontalBarGraph/HorizontalGraph.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js +1 -1
- package/dist/cjs/components/plans/SubscriptionPlan.d.ts +1 -0
- package/dist/cjs/components/plans/SubscriptionPlan.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js +1 -1
- package/dist/esm/components/plans/SubscriptionPlan.d.ts +1 -0
- package/dist/esm/components/plans/SubscriptionPlan.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),r=require("react-chartjs-2"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),r=require("react-chartjs-2"),o=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),a=require("./HorizontalGraph.styles.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip);exports.HorizontalGraph=t=>{var n,l,s,d;const c=-1===t.xAxis.data.findIndex((e=>0!==e)),g={indexAxis:"y",elements:{},responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!c}},scales:{y:{title:{display:!!t.yAxis.title,text:t.yAxis.title,color:t.yAxis.titleColor,font:{size:i.FONTS.caption.fontSize,color:t.yAxis.titleColor},padding:{bottom:10}},grid:{display:!1,borderColor:"white"},ticks:{fontSize:i.FONTS.caption.fontSize,color:null!==(n=t.yAxis.labelColor)&&void 0!==n?n:i.COLORS.content.secondary}},x:{title:{display:!!t.xAxis.title,text:t.xAxis.title,color:t.xAxis.titleColor,font:{size:i.FONTS.caption.fontSize},padding:{top:10}},grid:{borderColor:"white",color:i.COLORS.background.base},ticks:Object.assign({fontSize:i.FONTS.caption.fontSize,color:null!==(l=t.xAxis.labelColor)&&void 0!==l?l:i.COLORS.content.secondary},c?{min:0,max:2e3,stepSize:200}:{})}},maintainAspectRatio:!1},p={labels:t.yAxis.data.map((e=>e.toString())),datasets:[{data:c?[250,1e3,800,1500,300,600]:t.xAxis.data,backgroundColor:e=>(e=>{var r;const o=e.chart.ctx.createLinearGradient(0,0,0,200);let i="";if(c)i="rgba(0,0,0,0)";else if(t.barColorRGBA){const e=t.barColorRGBA;i=`rgba(${e.r}, ${e.g}, ${e.b}, ${null!==(r=e.a)&&void 0!==r?r:"0.3"})`}return o.addColorStop(0,i||"rgba(146, 96, 237, 0.3)"),o.addColorStop(1,i||"rgba(146, 96, 237, 0.3)"),o})(e),barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return console.log({data:p}),e.jsxs(a.GraphContainerWrapper,Object.assign({padding:t.outerPadding},{children:[t.chartHeading&&e.jsx(o.TitleRegular,Object.assign({color:null!==(s=t.chartHeading.color)&&void 0!==s?s:i.COLORS.content.secondary},{children:t.chartHeading.heading})),e.jsx("div",Object.assign({style:{height:null!==(d=t.graphCanvasHeight)&&void 0!==d?d:500}},{children:e.jsx(r.Bar,{options:g,data:p})}))]}))};
|
package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),a=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),o=require("./StackedBarChart.styles.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip,t.Legend);exports.StackedBarChart=t=>{var s,n,l,c;const d=0===t.yAxis.data.length,g=["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],p={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4},pointStyle:"circle"},y={};t.yAxis.data.map((e=>{e.map((e=>{y[e.name]?y[e.name].push(e.value):y[e.name]=[e.value]}))}));const u=Object.keys(y).map(((e,t)=>Object.assign({label:e,data:y[e],backgroundColor:g[t]},p))),x={plugins:{legend:{display:!d,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!d}},responsive:!0,maintainAspectRatio:!1,legend:{display:!0,labels:{usePointStyle:!0}},scales:{x:{title:{display:!!t.xAxis.title,text:t.xAxis.title,color:t.xAxis.titleColor,font:{size:r.FONTS.caption.fontSize}},grid:{display:!1,borderColor:r.COLORS.background.base},ticks:{fontSize:r.FONTS.caption.fontSize,color:null!==(s=t.yAxis.labelColor)&&void 0!==s?s:r.COLORS.content.secondary},stacked:!0},y:{title:{display:!!t.yAxis.title,text:t.yAxis.title,color:t.yAxis.titleColor,font:{size:r.FONTS.caption.fontSize}},grid:{borderColor:"white",color:r.COLORS.background.base},ticks:Object.assign({fontSize:r.FONTS.caption.fontSize,color:null!==(n=t.xAxis.labelColor)&&void 0!==n?n:r.COLORS.content.secondary},d?{min:0,max:2e3,stepSize:200}:{}),stacked:!0}}},b={labels:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),a=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),o=require("./StackedBarChart.styles.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip,t.Legend);exports.StackedBarChart=t=>{var s,n,l,c;const d=0===t.yAxis.data.length,g=["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],p={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4},pointStyle:"circle"},y={};t.yAxis.data.map((e=>{e.map((e=>{y[e.name]?y[e.name].push(e.value):y[e.name]=[e.value]}))}));const u=Object.keys(y).map(((e,t)=>Object.assign({label:e,data:y[e],backgroundColor:g[t]},p))),x={plugins:{legend:{display:!d,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!d}},responsive:!0,maintainAspectRatio:!1,legend:{display:!0,labels:{usePointStyle:!0}},scales:{x:{title:{display:!!t.xAxis.title,text:t.xAxis.title,color:t.xAxis.titleColor,font:{size:r.FONTS.caption.fontSize}},grid:{display:!1,borderColor:r.COLORS.background.base},ticks:{fontSize:r.FONTS.caption.fontSize,color:null!==(s=t.yAxis.labelColor)&&void 0!==s?s:r.COLORS.content.secondary},stacked:!0},y:{title:{display:!!t.yAxis.title,text:t.yAxis.title,color:t.yAxis.titleColor,font:{size:r.FONTS.caption.fontSize}},grid:{borderColor:"white",color:r.COLORS.background.base},ticks:Object.assign({fontSize:r.FONTS.caption.fontSize,color:null!==(n=t.xAxis.labelColor)&&void 0!==n?n:r.COLORS.content.secondary},d?{min:0,max:2e3,stepSize:200}:{}),stacked:!0}}},b={labels:t.xAxis.data.map((e=>"string"==typeof e?e:e.name)),datasets:d?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:u};return e.jsxs(o.GraphContainerWrapper,Object.assign({padding:t.outerPadding},{children:[t.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(i.TitleRegular,Object.assign({color:null!==(l=t.chartHeading.color)&&void 0!==l?l:r.COLORS.content.secondary},{children:t.chartHeading.heading}))})),e.jsx("div",Object.assign({style:{height:null!==(c=t.graphCanvasHeight)&&void 0!==c?c:500}},{children:e.jsx(a.Bar,{options:x,data:b})}))]}))};
|
package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),r=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),a=require("../../../../constants/Theme.js"),o=require("./VerticalGraph.styles.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip);exports.VerticalGraph=t=>{var s,n,l,c;const d=-1===t.yAxis.data.findIndex((e=>0!==e)),g={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!d}},scales:{x:{title:{display:!!t.xAxis.title,text:t.xAxis.title,color:t.xAxis.titleColor,font:{size:a.FONTS.caption.fontSize}},grid:{display:!1,borderColor:a.COLORS.background.base},ticks:{fontSize:a.FONTS.caption.fontSize,color:null!==(s=t.yAxis.labelColor)&&void 0!==s?s:a.COLORS.content.secondary}},y:{title:{display:!!t.yAxis.title,text:t.yAxis.title,color:t.yAxis.titleColor,font:{size:a.FONTS.caption.fontSize}},grid:{borderColor:"white",color:a.COLORS.background.base},ticks:Object.assign({fontSize:a.FONTS.caption.fontSize,color:null!==(n=t.xAxis.labelColor)&&void 0!==n?n:a.COLORS.content.secondary},d?{min:0,max:2e3,stepSize:200}:{})}},maintainAspectRatio:!1},x={labels:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),r=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),a=require("../../../../constants/Theme.js"),o=require("./VerticalGraph.styles.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip);exports.VerticalGraph=t=>{var s,n,l,c;const d=-1===t.yAxis.data.findIndex((e=>0!==e)),g={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!d}},scales:{x:{title:{display:!!t.xAxis.title,text:t.xAxis.title,color:t.xAxis.titleColor,font:{size:a.FONTS.caption.fontSize}},grid:{display:!1,borderColor:a.COLORS.background.base},ticks:{fontSize:a.FONTS.caption.fontSize,color:null!==(s=t.yAxis.labelColor)&&void 0!==s?s:a.COLORS.content.secondary}},y:{title:{display:!!t.yAxis.title,text:t.yAxis.title,color:t.yAxis.titleColor,font:{size:a.FONTS.caption.fontSize}},grid:{borderColor:"white",color:a.COLORS.background.base},ticks:Object.assign({fontSize:a.FONTS.caption.fontSize,color:null!==(n=t.xAxis.labelColor)&&void 0!==n?n:a.COLORS.content.secondary},d?{min:0,max:2e3,stepSize:200}:{})}},maintainAspectRatio:!1},x={labels:t.xAxis.data.map((e=>e.toString())),datasets:[{data:d?[250,1e3,800,1500,300,600]:t.yAxis.data,backgroundColor:e=>{var r;const i=t.barColorRGBA;let a=[];const o=t.xAxis.data.length;if(d)return"rgba(0,0,0,0)";if(t.isFunnel){let e=+(o>10?.1:(1/o).toFixed(2));const t=`rgba(${i.r}, ${i.g}, ${i.b}`;for(let r=1;r<o+1;r++){let i="";r>10?i=`${t},1)`:(i=`${t},${e})`,e+=.1),a.push(i)}}else{const e=`rgba(${i.r}, ${i.g}, ${i.b}, ${null!==(r=i.a)&&void 0!==r?r:"1"})`;a=Array(o).fill(e)}return a},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return e.jsxs(o.GraphContainerWrapper,Object.assign({padding:t.outerPadding},{children:[t.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(i.TitleMedium,Object.assign({color:null!==(l=t.chartHeading.color)&&void 0!==l?l:a.COLORS.content.secondary},{children:t.chartHeading.heading}))})),e.jsx("div",Object.assign({style:{height:null!==(c=t.graphCanvasHeight)&&void 0!==c?c:500}},{children:e.jsx(r.Bar,{options:g,data:x})}))]}))};
|
|
@@ -22,6 +22,7 @@ export interface SubscriptionPlanProps {
|
|
|
22
22
|
onPlanSelect: (code: string) => void;
|
|
23
23
|
bottomDescription?: string;
|
|
24
24
|
freeTrialMessages?: string;
|
|
25
|
+
extraBlockMessage?: string;
|
|
25
26
|
}
|
|
26
27
|
type Props = SubscriptionPlanProps;
|
|
27
28
|
export declare const SubscriptionPlan: FunctionComponent<Props>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/check.svg.js"),t=require("../button/Button.js"),i=require("./SubscriptionPlanStyled.js"),a=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");exports.SubscriptionPlan=r=>{const c=r.showMonthly?r.monthlyPlan:r.yearlyPlan,l=!r.isDisabled&&r.isMostPopular;return e.jsxs(i.SubscriptionPlanStyled,Object.assign({isSelected:r.isSelected||!1,style:{marginTop:l?0:24}},{children:[l&&e.jsx("div",Object.assign({className:"most-popular"},{children:e.jsx(a.Caption,Object.assign({className:"text"},{children:"Most popular ⭐️"}))})),e.jsxs("div",Object.assign({className:`box ${r.isSelected?"selected":""} ${r.isDisabled?"disabled":""} ${l?"":"rounded-corners"}\n\t\t\t\t`},{children:[e.jsxs("div",{children:[e.jsx(a.TitleRegular,Object.assign({style:{color:n.COLORS.content.secondary,marginBottom:4}},{children:r.planName})),e.jsxs("div",Object.assign({className:"price-block"},{children:[e.jsxs(a.TitleLarge,Object.assign({style:{color:n.COLORS.content.primary}},{children:["$ ",c.price]})),e.jsxs(a.BodyPrimary,Object.assign({style:{color:n.COLORS.content.secondary,marginLeft:4}},{children:["/ ",r.showMonthly?"month":"year"]}))]})),e.jsxs("div",Object.assign({className:"per-message-price"},{children:[e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.content.secondary}},{children:r.planDescription})),e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.background.positive.vibrant,marginLeft:4}},{children:r.planDescriptionDiscount}))]})),r.showTrialOptions&&e.jsxs(a.Caption,Object.assign({className:"trial "+(r.isSelected?"selected":"")},{children:["7 day free trial with ",r.freeTrialMessages," messages"]})),e.jsx("div",Object.assign({className:"features"},{children:r.features.map(((t,i)=>e.jsxs("div",Object.assign({className:"feature"},{children:[e.jsx(s.default,{height:16,width:16,color:n.COLORS.content.primary}),e.jsx(a.BodyPrimary,Object.assign({className:"feature-text"},{children:t.detail}),i)]}),t.detail)))}))]}),e.jsxs("div",Object.assign({className:"button-box"},{children:[r.isSelected&&e.jsx(t.Button,{LeadingIcon:s.default,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:"Selected Plan",disabled:!1}),r.isDisabled&&e.jsx(t.Button,{disabled:!0,buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Choose plan"}),!r.isSelected&&!r.isDisabled&&e.jsx(t.Button,{buttonType:"primary",size:"medium",onClick:()=>r.onPlanSelect(r.code),matchParentWidth:!0,buttonText:"Choose plan"})]}))]})),e.jsx("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${r.isDisabled?"disabled":""}\n\t\t\t\t\t${r.isSelected?"selected":""}\n\t\t\t\t`},{children:e.jsx(a.Caption,Object.assign({className:"text",style:{color:n.COLORS.background.inverse}},{children:r.bottomDescription}))}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/check.svg.js"),t=require("../button/Button.js"),i=require("./SubscriptionPlanStyled.js"),a=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");exports.SubscriptionPlan=r=>{const c=r.showMonthly?r.monthlyPlan:r.yearlyPlan,l=!r.isDisabled&&r.isMostPopular;return e.jsxs(i.SubscriptionPlanStyled,Object.assign({isSelected:r.isSelected||!1,style:{marginTop:l?0:24}},{children:[l&&e.jsx("div",Object.assign({className:"most-popular"},{children:e.jsx(a.Caption,Object.assign({className:"text"},{children:"Most popular ⭐️"}))})),e.jsxs("div",Object.assign({className:`box ${r.isSelected?"selected":""} ${r.isDisabled?"disabled":""} ${l?"":"rounded-corners"}\n\t\t\t\t`},{children:[e.jsxs("div",{children:[e.jsx(a.TitleRegular,Object.assign({style:{color:n.COLORS.content.secondary,marginBottom:4}},{children:r.planName})),e.jsxs("div",Object.assign({className:"price-block"},{children:[e.jsxs(a.TitleLarge,Object.assign({style:{color:n.COLORS.content.primary}},{children:["$ ",c.price]})),e.jsxs(a.BodyPrimary,Object.assign({style:{color:n.COLORS.content.secondary,marginLeft:4}},{children:["/ ",r.showMonthly?"month":"year"]}))]})),e.jsxs("div",Object.assign({className:"per-message-price"},{children:[e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.content.secondary}},{children:r.planDescription})),e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.background.positive.vibrant,marginLeft:4}},{children:r.planDescriptionDiscount}))]})),r.showTrialOptions&&e.jsxs(a.Caption,Object.assign({className:"trial "+(r.isSelected?"selected":"")},{children:["7 day free trial with ",r.freeTrialMessages," messages"]})),r.extraBlockMessage&&e.jsx(a.Caption,Object.assign({className:"trial "+(r.isSelected?"selected":"")},{children:r.extraBlockMessage})),e.jsx("div",Object.assign({className:"features"},{children:r.features.map(((t,i)=>e.jsxs("div",Object.assign({className:"feature"},{children:[e.jsx(s.default,{height:16,width:16,color:n.COLORS.content.primary}),e.jsx(a.BodyPrimary,Object.assign({className:"feature-text"},{children:t.detail}),i)]}),t.detail)))}))]}),e.jsxs("div",Object.assign({className:"button-box"},{children:[r.isSelected&&e.jsx(t.Button,{LeadingIcon:s.default,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:"Selected Plan",disabled:!1}),r.isDisabled&&e.jsx(t.Button,{disabled:!0,buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Choose plan"}),!r.isSelected&&!r.isDisabled&&e.jsx(t.Button,{buttonType:"primary",size:"medium",onClick:()=>r.onPlanSelect(r.code),matchParentWidth:!0,buttonText:"Choose plan"})]}))]})),e.jsx("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${r.isDisabled?"disabled":""}\n\t\t\t\t\t${r.isSelected?"selected":""}\n\t\t\t\t`},{children:e.jsx(a.Caption,Object.assign({className:"text",style:{color:n.COLORS.background.inverse}},{children:r.bottomDescription}))}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{Chart as e,CategoryScale as i,LinearScale as r,BarElement as a,Tooltip as n}from"chart.js";import{Bar as l}from"react-chartjs-2";import{TitleRegular as s}from"../../../TypographyStyle.js";import{FONTS as d,COLORS as c}from"../../../../constants/Theme.js";import{GraphContainerWrapper as g}from"./HorizontalGraph.styles.js";e.register(i,r,a,n);const p=e=>{var i,r,a,n;const p=-1===e.xAxis.data.findIndex((t=>0!==t)),x={indexAxis:"y",elements:{},responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!p}},scales:{y:{title:{display:!!e.yAxis.title,text:e.yAxis.title,color:e.yAxis.titleColor,font:{size:d.caption.fontSize,color:e.yAxis.titleColor},padding:{bottom:10}},grid:{display:!1,borderColor:"white"},ticks:{fontSize:d.caption.fontSize,color:null!==(i=e.yAxis.labelColor)&&void 0!==i?i:c.content.secondary}},x:{title:{display:!!e.xAxis.title,text:e.xAxis.title,color:e.xAxis.titleColor,font:{size:d.caption.fontSize},padding:{top:10}},grid:{borderColor:"white",color:c.background.base},ticks:Object.assign({fontSize:d.caption.fontSize,color:null!==(r=e.xAxis.labelColor)&&void 0!==r?r:c.content.secondary},p?{min:0,max:2e3,stepSize:200}:{})}},maintainAspectRatio:!1},b={labels:
|
|
1
|
+
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{Chart as e,CategoryScale as i,LinearScale as r,BarElement as a,Tooltip as n}from"chart.js";import{Bar as l}from"react-chartjs-2";import{TitleRegular as s}from"../../../TypographyStyle.js";import{FONTS as d,COLORS as c}from"../../../../constants/Theme.js";import{GraphContainerWrapper as g}from"./HorizontalGraph.styles.js";e.register(i,r,a,n);const p=e=>{var i,r,a,n;const p=-1===e.xAxis.data.findIndex((t=>0!==t)),x={indexAxis:"y",elements:{},responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!p}},scales:{y:{title:{display:!!e.yAxis.title,text:e.yAxis.title,color:e.yAxis.titleColor,font:{size:d.caption.fontSize,color:e.yAxis.titleColor},padding:{bottom:10}},grid:{display:!1,borderColor:"white"},ticks:{fontSize:d.caption.fontSize,color:null!==(i=e.yAxis.labelColor)&&void 0!==i?i:c.content.secondary}},x:{title:{display:!!e.xAxis.title,text:e.xAxis.title,color:e.xAxis.titleColor,font:{size:d.caption.fontSize},padding:{top:10}},grid:{borderColor:"white",color:c.background.base},ticks:Object.assign({fontSize:d.caption.fontSize,color:null!==(r=e.xAxis.labelColor)&&void 0!==r?r:c.content.secondary},p?{min:0,max:2e3,stepSize:200}:{})}},maintainAspectRatio:!1},b={labels:e.yAxis.data.map((t=>t.toString())),datasets:[{data:p?[250,1e3,800,1500,300,600]:e.xAxis.data,backgroundColor:t=>(t=>{var o;const i=t.chart.ctx.createLinearGradient(0,0,0,200);let r="";if(p)r="rgba(0,0,0,0)";else if(e.barColorRGBA){const t=e.barColorRGBA;r=`rgba(${t.r}, ${t.g}, ${t.b}, ${null!==(o=t.a)&&void 0!==o?o:"0.3"})`}return i.addColorStop(0,r||"rgba(146, 96, 237, 0.3)"),i.addColorStop(1,r||"rgba(146, 96, 237, 0.3)"),i})(t),barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return console.log({data:b}),t(g,Object.assign({padding:e.outerPadding},{children:[e.chartHeading&&o(s,Object.assign({color:null!==(a=e.chartHeading.color)&&void 0!==a?a:c.content.secondary},{children:e.chartHeading.heading})),o("div",Object.assign({style:{height:null!==(n=e.graphCanvasHeight)&&void 0!==n?n:500}},{children:o(l,{options:x,data:b})}))]}))};export{p as HorizontalGraph};
|
package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Chart as o,CategoryScale as a,LinearScale as i,BarElement as n,Tooltip as s,Legend as r}from"chart.js";import{Bar as l}from"react-chartjs-2";import{TitleRegular as c}from"../../../TypographyStyle.js";import{FONTS as d,COLORS as p}from"../../../../constants/Theme.js";import{GraphContainerWrapper as g}from"./StackedBarChart.styles.js";o.register(a,i,n,s,r);const m=o=>{var a,i,n,s;const r=0===o.yAxis.data.length,m=["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],y={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4},pointStyle:"circle"},b={};o.yAxis.data.map((t=>{t.map((t=>{b[t.name]?b[t.name].push(t.value):b[t.name]=[t.value]}))}));const x=Object.keys(b).map(((t,e)=>Object.assign({label:t,data:b[t],backgroundColor:m[e]},y))),h={plugins:{legend:{display:!r,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!r}},responsive:!0,maintainAspectRatio:!1,legend:{display:!0,labels:{usePointStyle:!0}},scales:{x:{title:{display:!!o.xAxis.title,text:o.xAxis.title,color:o.xAxis.titleColor,font:{size:d.caption.fontSize}},grid:{display:!1,borderColor:p.background.base},ticks:{fontSize:d.caption.fontSize,color:null!==(a=o.yAxis.labelColor)&&void 0!==a?a:p.content.secondary},stacked:!0},y:{title:{display:!!o.yAxis.title,text:o.yAxis.title,color:o.yAxis.titleColor,font:{size:d.caption.fontSize}},grid:{borderColor:"white",color:p.background.base},ticks:Object.assign({fontSize:d.caption.fontSize,color:null!==(i=o.xAxis.labelColor)&&void 0!==i?i:p.content.secondary},r?{min:0,max:2e3,stepSize:200}:{}),stacked:!0}}},u={labels:
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Chart as o,CategoryScale as a,LinearScale as i,BarElement as n,Tooltip as s,Legend as r}from"chart.js";import{Bar as l}from"react-chartjs-2";import{TitleRegular as c}from"../../../TypographyStyle.js";import{FONTS as d,COLORS as p}from"../../../../constants/Theme.js";import{GraphContainerWrapper as g}from"./StackedBarChart.styles.js";o.register(a,i,n,s,r);const m=o=>{var a,i,n,s;const r=0===o.yAxis.data.length,m=["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],y={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4},pointStyle:"circle"},b={};o.yAxis.data.map((t=>{t.map((t=>{b[t.name]?b[t.name].push(t.value):b[t.name]=[t.value]}))}));const x=Object.keys(b).map(((t,e)=>Object.assign({label:t,data:b[t],backgroundColor:m[e]},y))),h={plugins:{legend:{display:!r,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!r}},responsive:!0,maintainAspectRatio:!1,legend:{display:!0,labels:{usePointStyle:!0}},scales:{x:{title:{display:!!o.xAxis.title,text:o.xAxis.title,color:o.xAxis.titleColor,font:{size:d.caption.fontSize}},grid:{display:!1,borderColor:p.background.base},ticks:{fontSize:d.caption.fontSize,color:null!==(a=o.yAxis.labelColor)&&void 0!==a?a:p.content.secondary},stacked:!0},y:{title:{display:!!o.yAxis.title,text:o.yAxis.title,color:o.yAxis.titleColor,font:{size:d.caption.fontSize}},grid:{borderColor:"white",color:p.background.base},ticks:Object.assign({fontSize:d.caption.fontSize,color:null!==(i=o.xAxis.labelColor)&&void 0!==i?i:p.content.secondary},r?{min:0,max:2e3,stepSize:200}:{}),stacked:!0}}},u={labels:o.xAxis.data.map((t=>"string"==typeof t?t:t.name)),datasets:r?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:x};return t(g,Object.assign({padding:o.outerPadding},{children:[o.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(c,Object.assign({color:null!==(n=o.chartHeading.color)&&void 0!==n?n:p.content.secondary},{children:o.chartHeading.heading}))})),e("div",Object.assign({style:{height:null!==(s=o.graphCanvasHeight)&&void 0!==s?s:500}},{children:e(l,{options:h,data:u})}))]}))};export{m as StackedBarChart};
|
package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Chart as o,CategoryScale as i,LinearScale as r,BarElement as a,Tooltip as n}from"chart.js";import{Bar as s}from"react-chartjs-2";import{TitleMedium as l}from"../../../TypographyStyle.js";import{FONTS as c,COLORS as d}from"../../../../constants/Theme.js";import{GraphContainerWrapper as g}from"./VerticalGraph.styles.js";o.register(i,r,a,n);const p=o=>{var i,r,a,n;const p=-1===o.yAxis.data.findIndex((t=>0!==t)),x={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!p}},scales:{x:{title:{display:!!o.xAxis.title,text:o.xAxis.title,color:o.xAxis.titleColor,font:{size:c.caption.fontSize}},grid:{display:!1,borderColor:d.background.base},ticks:{fontSize:c.caption.fontSize,color:null!==(i=o.yAxis.labelColor)&&void 0!==i?i:d.content.secondary}},y:{title:{display:!!o.yAxis.title,text:o.yAxis.title,color:o.yAxis.titleColor,font:{size:c.caption.fontSize}},grid:{borderColor:"white",color:d.background.base},ticks:Object.assign({fontSize:c.caption.fontSize,color:null!==(r=o.xAxis.labelColor)&&void 0!==r?r:d.content.secondary},p?{min:0,max:2e3,stepSize:200}:{})}},maintainAspectRatio:!1},b={labels:
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Chart as o,CategoryScale as i,LinearScale as r,BarElement as a,Tooltip as n}from"chart.js";import{Bar as s}from"react-chartjs-2";import{TitleMedium as l}from"../../../TypographyStyle.js";import{FONTS as c,COLORS as d}from"../../../../constants/Theme.js";import{GraphContainerWrapper as g}from"./VerticalGraph.styles.js";o.register(i,r,a,n);const p=o=>{var i,r,a,n;const p=-1===o.yAxis.data.findIndex((t=>0!==t)),x={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!p}},scales:{x:{title:{display:!!o.xAxis.title,text:o.xAxis.title,color:o.xAxis.titleColor,font:{size:c.caption.fontSize}},grid:{display:!1,borderColor:d.background.base},ticks:{fontSize:c.caption.fontSize,color:null!==(i=o.yAxis.labelColor)&&void 0!==i?i:d.content.secondary}},y:{title:{display:!!o.yAxis.title,text:o.yAxis.title,color:o.yAxis.titleColor,font:{size:c.caption.fontSize}},grid:{borderColor:"white",color:d.background.base},ticks:Object.assign({fontSize:c.caption.fontSize,color:null!==(r=o.xAxis.labelColor)&&void 0!==r?r:d.content.secondary},p?{min:0,max:2e3,stepSize:200}:{})}},maintainAspectRatio:!1},b={labels:o.xAxis.data.map((t=>t.toString())),datasets:[{data:p?[250,1e3,800,1500,300,600]:o.yAxis.data,backgroundColor:t=>{var e;const i=o.barColorRGBA;let r=[];const a=o.xAxis.data.length;if(p)return"rgba(0,0,0,0)";if(o.isFunnel){let t=+(a>10?.1:(1/a).toFixed(2));const e=`rgba(${i.r}, ${i.g}, ${i.b}`;for(let o=1;o<a+1;o++){let i="";o>10?i=`${e},1)`:(i=`${e},${t})`,t+=.1),r.push(i)}}else{const t=`rgba(${i.r}, ${i.g}, ${i.b}, ${null!==(e=i.a)&&void 0!==e?e:"1"})`;r=Array(a).fill(t)}return r},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return t(g,Object.assign({padding:o.outerPadding},{children:[o.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(l,Object.assign({color:null!==(a=o.chartHeading.color)&&void 0!==a?a:d.content.secondary},{children:o.chartHeading.heading}))})),e("div",Object.assign({style:{height:null!==(n=o.graphCanvasHeight)&&void 0!==n?n:500}},{children:e(s,{options:x,data:b})}))]}))};export{p as VerticalGraph};
|
|
@@ -22,6 +22,7 @@ export interface SubscriptionPlanProps {
|
|
|
22
22
|
onPlanSelect: (code: string) => void;
|
|
23
23
|
bottomDescription?: string;
|
|
24
24
|
freeTrialMessages?: string;
|
|
25
|
+
extraBlockMessage?: string;
|
|
25
26
|
}
|
|
26
27
|
type Props = SubscriptionPlanProps;
|
|
27
28
|
export declare const SubscriptionPlan: FunctionComponent<Props>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import s from"../../assets/icons/check.svg.js";import{Button as i}from"../button/Button.js";import{SubscriptionPlanStyled as a}from"./SubscriptionPlanStyled.js";import{Caption as n,TitleRegular as c,TitleLarge as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import s from"../../assets/icons/check.svg.js";import{Button as i}from"../button/Button.js";import{SubscriptionPlanStyled as a}from"./SubscriptionPlanStyled.js";import{Caption as n,TitleRegular as c,TitleLarge as l,BodyPrimary as r,BodyCaption as o}from"../TypographyStyle.js";import{COLORS as d}from"../../constants/Theme.js";const m=m=>{const b=m.showMonthly?m.monthlyPlan:m.yearlyPlan,h=!m.isDisabled&&m.isMostPopular;return e(a,Object.assign({isSelected:m.isSelected||!1,style:{marginTop:h?0:24}},{children:[h&&t("div",Object.assign({className:"most-popular"},{children:t(n,Object.assign({className:"text"},{children:"Most popular ⭐️"}))})),e("div",Object.assign({className:`box ${m.isSelected?"selected":""} ${m.isDisabled?"disabled":""} ${h?"":"rounded-corners"}\n\t\t\t\t`},{children:[e("div",{children:[t(c,Object.assign({style:{color:d.content.secondary,marginBottom:4}},{children:m.planName})),e("div",Object.assign({className:"price-block"},{children:[e(l,Object.assign({style:{color:d.content.primary}},{children:["$ ",b.price]})),e(r,Object.assign({style:{color:d.content.secondary,marginLeft:4}},{children:["/ ",m.showMonthly?"month":"year"]}))]})),e("div",Object.assign({className:"per-message-price"},{children:[t(o,Object.assign({style:{color:d.content.secondary}},{children:m.planDescription})),t(o,Object.assign({style:{color:d.background.positive.vibrant,marginLeft:4}},{children:m.planDescriptionDiscount}))]})),m.showTrialOptions&&e(n,Object.assign({className:"trial "+(m.isSelected?"selected":"")},{children:["7 day free trial with ",m.freeTrialMessages," messages"]})),m.extraBlockMessage&&t(n,Object.assign({className:"trial "+(m.isSelected?"selected":"")},{children:m.extraBlockMessage})),t("div",Object.assign({className:"features"},{children:m.features.map(((i,a)=>e("div",Object.assign({className:"feature"},{children:[t(s,{height:16,width:16,color:d.content.primary}),t(r,Object.assign({className:"feature-text"},{children:i.detail}),a)]}),i.detail)))}))]}),e("div",Object.assign({className:"button-box"},{children:[m.isSelected&&t(i,{LeadingIcon:s,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:"Selected Plan",disabled:!1}),m.isDisabled&&t(i,{disabled:!0,buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Choose plan"}),!m.isSelected&&!m.isDisabled&&t(i,{buttonType:"primary",size:"medium",onClick:()=>m.onPlanSelect(m.code),matchParentWidth:!0,buttonText:"Choose plan"})]}))]})),t("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${m.isDisabled?"disabled":""}\n\t\t\t\t\t${m.isSelected?"selected":""}\n\t\t\t\t`},{children:t(n,Object.assign({className:"text",style:{color:d.background.inverse}},{children:m.bottomDescription}))}))]}))};export{m as SubscriptionPlan};
|