qlu-20-ui-library 1.7.87 → 1.7.89

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.
Files changed (11) hide show
  1. package/dist/build/index.css +1 -1
  2. package/dist/build/qlu-20-ui-library.cjs +49 -49
  3. package/dist/build/qlu-20-ui-library.js +1619 -1588
  4. package/dist/components/CreditBarChart/index.d.ts +1 -0
  5. package/dist/components/CreditUsageChart/index.d.ts +1 -0
  6. package/dist/types/components/CreditBarChart/index.d.ts +1 -0
  7. package/dist/types/components/CreditBarChart/index.js +24 -5
  8. package/dist/types/components/CreditUsageChart/index.d.ts +1 -0
  9. package/dist/types/components/CreditUsageChart/index.js +3 -6
  10. package/dist/types/stories/CreditUsageChart.stories.js +24 -24
  11. package/package.json +1 -1
package/dist/components/CreditBarChart/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export interface ICreditBarChart {
2
2
  quater: string;
3
3
  amount: number;
4
+ phoneAmount: number;
4
5
  }
5
6
  export interface CreditBarChartProps {
6
7
  revenues: ICreditBarChart[];
package/dist/components/CreditUsageChart/index.d.ts CHANGED
@@ -22,6 +22,7 @@ type CreditUsageChartProps = {
22
22
  creditUsageData: {
23
23
  quater: string;
24
24
  amount: number;
25
+ phoneAmount: number;
25
26
  }[];
26
27
  isLoading: boolean;
27
28
  isError: boolean;
package/dist/types/components/CreditBarChart/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export interface ICreditBarChart {
2
2
  quater: string;
3
3
  amount: number;
4
+ phoneAmount: number;
4
5
  }
5
6
  export interface CreditBarChartProps {
6
7
  revenues: ICreditBarChart[];
package/dist/types/components/CreditBarChart/index.js CHANGED
@@ -7,19 +7,38 @@ ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
7
7
  const CreditBarChart = ({ revenues, aspectRatio = 5 }) => {
8
8
  const labels = revenues.map((data) => data.quater);
9
9
  const values = revenues.map((data) => data.amount);
10
+ const phoneValues = revenues.map((data) => data.phoneAmount);
10
11
  const maxValue = Math.max(...values);
11
12
  const fixedMax = maxValue <= 10 ? 10 : maxValue + maxValue * 0.1;
12
13
  const data = {
13
14
  labels,
14
15
  datasets: [
15
16
  {
16
- label: "",
17
+ label: "Email",
17
18
  data: values,
18
19
  borderWidth: 2,
19
20
  backgroundColor: "#4B4B4B",
20
21
  barThickness: 31,
21
22
  maxBarThickness: 27,
22
- hoverBorderColor: "#CC713E",
23
+ hoverBorderColor: "#5e5e5e",
24
+ borderColor: "#5e5e5e",
25
+ borderRadius: {
26
+ topLeft: 8,
27
+ topRight: 8,
28
+ bottomLeft: 8,
29
+ bottomRight: 8,
30
+ },
31
+ borderSkipped: false,
32
+ },
33
+ {
34
+ label: "Phone",
35
+ data: phoneValues,
36
+ borderWidth: 2,
37
+ backgroundColor: "#66381f",
38
+ barThickness: 31,
39
+ maxBarThickness: 27,
40
+ hoverBorderColor: "#cc713e",
41
+ borderColor: "#cc713e",
23
42
  borderRadius: {
24
43
  topLeft: 8,
25
44
  topRight: 8,
@@ -97,9 +116,9 @@ const CreditBarChart = ({ revenues, aspectRatio = 5 }) => {
97
116
  bodyColor: "#FF8D4E",
98
117
  bodyFont: {
99
118
  family: "Inter",
100
- size: 12,
101
- weight: 300,
102
- lineHeight: "18px",
119
+ size: 14,
120
+ weight: 500,
121
+ lineHeight: "20px",
103
122
  },
104
123
  displayColors: false,
105
124
  enabled: true,
package/dist/types/components/CreditUsageChart/index.d.ts CHANGED
@@ -22,6 +22,7 @@ type CreditUsageChartProps = {
22
22
  creditUsageData: {
23
23
  quater: string;
24
24
  amount: number;
25
+ phoneAmount: number;
25
26
  }[];
26
27
  isLoading: boolean;
27
28
  isError: boolean;
package/dist/types/components/CreditUsageChart/index.js CHANGED
@@ -26,11 +26,8 @@ export const typeFrameText = {
26
26
  const CreditUsageChart = ({ title, selectedTimeFrame, creditUsageData, isLoading, isError, setSelectedTimeFrame, }) => {
27
27
  const renderLoader = () => (_jsx("div", { className: styles.creditUsageChartLoader, children: _jsx(Loader, { width: "24", height: "24" }) }));
28
28
  const renderError = () => (_jsx("div", { className: styles.creditUsageChartError, children: _jsx("span", { className: styles.creditUsageChartDataNA, children: "No data to show yet" }) }));
29
- return (_jsxs("div", { className: styles.creditUsageChartContainer, children: [_jsxs("div", { className: styles.creditUsageChartHeader, children: [_jsx("h3", { children: title }), _jsx("div", { className: styles.dropDownContainer, children: _jsx(DropDownButton, { dropDownText: typeFrameText[selectedTimeFrame], children: Object.values(TimeFrame)
30
- .filter((type) => ![
31
- TimeFrame.Today,
32
- TimeFrame.Custom,
33
- ].includes(type))
34
- .map((type, index) => (_jsx(DropdownChildButton, { onClick: () => setSelectedTimeFrame(type), text: typeFrameText[type], active: selectedTimeFrame === type }, index))) }) })] }), isLoading ? (renderLoader()) : isError ? (renderError()) : (_jsx("div", { className: styles.creditUsageChart, children: _jsx(CreditBarChart, { revenues: creditUsageData }) }))] }));
29
+ return (_jsxs("div", { className: styles.creditUsageChartContainer, children: [_jsxs("div", { className: styles.creditUsageChartHeader, children: [_jsx("h3", { children: title }), _jsxs("div", { className: styles.options, children: [_jsxs("div", { className: styles.option, children: [_jsx("div", { className: styles.color }), _jsx("span", { children: "Email credits" })] }), _jsxs("div", { className: styles.option, children: [_jsx("div", { className: styles.color }), _jsx("span", { children: "Phone credits" })] }), _jsx("div", { className: styles.dropDownContainer, children: _jsx(DropDownButton, { dropDownText: typeFrameText[selectedTimeFrame], children: Object.values(TimeFrame)
30
+ .filter((type) => ![TimeFrame.Today, TimeFrame.Custom].includes(type))
31
+ .map((type, index) => (_jsx(DropdownChildButton, { onClick: () => setSelectedTimeFrame(type), text: typeFrameText[type], active: selectedTimeFrame === type }, index))) }) })] })] }), isLoading ? (renderLoader()) : isError ? (renderError()) : (_jsx("div", { className: styles.creditUsageChart, children: _jsx(CreditBarChart, { revenues: creditUsageData }) }))] }));
35
32
  };
36
33
  export default CreditUsageChart;
package/dist/types/stories/CreditUsageChart.stories.js CHANGED
@@ -7,38 +7,38 @@ const meta = {
7
7
  export default meta;
8
8
  const sampleData = {
9
9
  [TimeFrame.Last7Days]: [
10
- { quater: "Day 1", amount: 1000 },
11
- { quater: "Day 2", amount: 1200 },
12
- { quater: "Day 3", amount: 900 },
13
- { quater: "Day 4", amount: 1100 },
14
- { quater: "Day 5", amount: 1300 },
15
- { quater: "Day 6", amount: 1250 },
16
- { quater: "Day 7", amount: 1400 },
10
+ { quater: "Day 1", amount: 1000, phoneAmount: 1000 },
11
+ { quater: "Day 2", amount: 1200, phoneAmount: 1200 },
12
+ { quater: "Day 3", amount: 900, phoneAmount: 900 },
13
+ { quater: "Day 4", amount: 1100, phoneAmount: 1100 },
14
+ { quater: "Day 5", amount: 1300, phoneAmount: 1300 },
15
+ { quater: "Day 6", amount: 1250, phoneAmount: 1250 },
16
+ { quater: "Day 7", amount: 1400, phoneAmount: 1400 },
17
17
  ],
18
18
  [TimeFrame.LastMonth]: [
19
- { quater: "Week 1", amount: 4000 },
20
- { quater: "Week 2", amount: 5000 },
21
- { quater: "Week 3", amount: 4500 },
22
- { quater: "Week 4", amount: 4800 },
19
+ { quater: "Week 1", amount: 4000, phoneAmount: 4000 },
20
+ { quater: "Week 2", amount: 5000, phoneAmount: 5000 },
21
+ { quater: "Week 3", amount: 4500, phoneAmount: 4500 },
22
+ { quater: "Week 4", amount: 4800, phoneAmount: 4800 },
23
23
  ],
24
24
  [TimeFrame.Last3Months]: [
25
- { quater: "Jan", amount: 12000 },
26
- { quater: "Feb", amount: 13000 },
27
- { quater: "Mar", amount: 12500 },
25
+ { quater: "Jan", amount: 12000, phoneAmount: 12000 },
26
+ { quater: "Feb", amount: 13000, phoneAmount: 13000 },
27
+ { quater: "Mar", amount: 12500, phoneAmount: 12500 },
28
28
  ],
29
29
  [TimeFrame.Last6Months]: [
30
- { quater: "Oct", amount: 10000 },
31
- { quater: "Nov", amount: 9500 },
32
- { quater: "Dec", amount: 11000 },
33
- { quater: "Jan", amount: 12000 },
34
- { quater: "Feb", amount: 13000 },
35
- { quater: "Mar", amount: 12500 },
30
+ { quater: "Oct", amount: 10000, phoneAmount: 10000 },
31
+ { quater: "Nov", amount: 9500, phoneAmount: 9500 },
32
+ { quater: "Dec", amount: 11000, phoneAmount: 11000 },
33
+ { quater: "Jan", amount: 12000, phoneAmount: 12000 },
34
+ { quater: "Feb", amount: 13000, phoneAmount: 13000 },
35
+ { quater: "Mar", amount: 12500, phoneAmount: 12500 },
36
36
  ],
37
37
  [TimeFrame.LastYear]: [
38
- { quater: "Q1", amount: 30000 },
39
- { quater: "Q2", amount: 35000 },
40
- { quater: "Q3", amount: 32000 },
41
- { quater: "Q4", amount: 37000 },
38
+ { quater: "Q1", amount: 30000, phoneAmount: 30000 },
39
+ { quater: "Q2", amount: 35000, phoneAmount: 35000 },
40
+ { quater: "Q3", amount: 32000, phoneAmount: 32000 },
41
+ { quater: "Q4", amount: 37000, phoneAmount: 37000 },
42
42
  ],
43
43
  };
44
44
  export const Past7Days = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qlu-20-ui-library",
3
- "version": "1.7.87",
3
+ "version": "1.7.89",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",