@papernote/ui 1.11.3 → 1.11.4
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/FunnelChart.d.ts.map +1 -1
- package/dist/index.esm.js +39 -47
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +39 -47
- package/dist/index.js.map +1 -1
- package/dist/styles.css +4 -0
- package/package.json +1 -1
- package/src/components/FunnelChart.tsx +14 -12
package/dist/index.js
CHANGED
|
@@ -12330,9 +12330,9 @@ function FunnelChart({ stages, height = 300, showConversion = true, onStageClick
|
|
|
12330
12330
|
return null;
|
|
12331
12331
|
const maxCount = Math.max(...stages.map(s => s.count), 1);
|
|
12332
12332
|
const stageHeight = height / stages.length;
|
|
12333
|
-
const svgWidth =
|
|
12333
|
+
const svgWidth = 450;
|
|
12334
12334
|
const padding = 20;
|
|
12335
|
-
const leftLabelSpace =
|
|
12335
|
+
const leftLabelSpace = 50; // Space for conversion rate labels on left
|
|
12336
12336
|
const rightLabelSpace = 160; // Space for stage name + value labels on right
|
|
12337
12337
|
const funnelWidth = svgWidth - padding * 2 - leftLabelSpace - rightLabelSpace;
|
|
12338
12338
|
return (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx("svg", { width: "100%", viewBox: `0 0 ${svgWidth} ${height}`, preserveAspectRatio: "xMidYMid meet", children: stages.map((stage, idx) => {
|
|
@@ -12355,7 +12355,7 @@ function FunnelChart({ stages, height = 300, showConversion = true, onStageClick
|
|
|
12355
12355
|
L ${centerX - bottomWidth / 2} ${y + stageHeight - 2}
|
|
12356
12356
|
Z
|
|
12357
12357
|
`;
|
|
12358
|
-
return (jsxRuntime.jsxs("g", { onClick: () => onStageClick?.(stage.name), style: onStageClick ? { cursor: 'pointer' } : undefined, role: onStageClick ? 'button' : undefined, children: [jsxRuntime.jsx("path", { d: path, fill: color, opacity: 0.85, className: "transition-opacity hover:opacity-100" }), jsxRuntime.jsx("text", { x: centerX, y: y + stageHeight / 2 + 1, textAnchor: "middle", dominantBaseline: "middle", className: "fill-white text-xs font-bold", style: { fontSize: '12px' }, children: stage.count.toLocaleString() }), jsxRuntime.jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 - 6, className: "fill-ink-700 dark:fill-ink-300", style: { fontSize: '11px', fontWeight: 500 }, children: stage.name }), stage.value && (jsxRuntime.jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 + 8, className: "fill-ink-400", style: { fontSize: '10px' }, children: stage.value })), showConversion && conversionRate !== null && (jsxRuntime.jsxs("text", { x: centerX - funnelWidth / 2 -
|
|
12358
|
+
return (jsxRuntime.jsxs("g", { onClick: () => onStageClick?.(stage.name), style: onStageClick ? { cursor: 'pointer' } : undefined, role: onStageClick ? 'button' : undefined, children: [jsxRuntime.jsx("path", { d: path, fill: color, opacity: 0.85, className: "transition-opacity hover:opacity-100" }), jsxRuntime.jsx("text", { x: centerX, y: y + stageHeight / 2 + 1, textAnchor: "middle", dominantBaseline: "middle", className: "fill-white text-xs font-bold", style: { fontSize: '12px' }, children: stage.count.toLocaleString() }), jsxRuntime.jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 - 6, className: "fill-ink-700 dark:fill-ink-300", style: { fontSize: '11px', fontWeight: 500 }, children: stage.name }), stage.value && (jsxRuntime.jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 + 8, className: "fill-ink-400", style: { fontSize: '10px' }, children: stage.value })), showConversion && conversionRate !== null && (jsxRuntime.jsx("g", { children: jsxRuntime.jsxs("text", { x: centerX - funnelWidth / 2 - 16, y: y + 4, textAnchor: "end", className: "fill-ink-500", style: { fontSize: '10px', fontWeight: 500 }, children: ["\u2193 ", conversionRate, "%"] }) }))] }, stage.name));
|
|
12359
12359
|
}) }) }));
|
|
12360
12360
|
}
|
|
12361
12361
|
|
|
@@ -15692,52 +15692,44 @@ function getAugmentedNamespace(n) {
|
|
|
15692
15692
|
* (A1, A1:C5, ...)
|
|
15693
15693
|
*/
|
|
15694
15694
|
|
|
15695
|
-
|
|
15696
|
-
var hasRequiredCollection;
|
|
15697
|
-
|
|
15698
|
-
function requireCollection () {
|
|
15699
|
-
if (hasRequiredCollection) return collection;
|
|
15700
|
-
hasRequiredCollection = 1;
|
|
15701
|
-
class Collection {
|
|
15695
|
+
let Collection$3 = class Collection {
|
|
15702
15696
|
|
|
15703
|
-
|
|
15704
|
-
|
|
15705
|
-
|
|
15706
|
-
|
|
15707
|
-
|
|
15708
|
-
|
|
15709
|
-
|
|
15710
|
-
|
|
15711
|
-
|
|
15712
|
-
|
|
15713
|
-
|
|
15697
|
+
constructor(data, refs) {
|
|
15698
|
+
if (data == null && refs == null) {
|
|
15699
|
+
this._data = [];
|
|
15700
|
+
this._refs = [];
|
|
15701
|
+
} else {
|
|
15702
|
+
if (data.length !== refs.length)
|
|
15703
|
+
throw Error('Collection: data length should match references length.');
|
|
15704
|
+
this._data = data;
|
|
15705
|
+
this._refs = refs;
|
|
15706
|
+
}
|
|
15707
|
+
}
|
|
15714
15708
|
|
|
15715
|
-
|
|
15716
|
-
|
|
15717
|
-
|
|
15709
|
+
get data() {
|
|
15710
|
+
return this._data;
|
|
15711
|
+
}
|
|
15718
15712
|
|
|
15719
|
-
|
|
15720
|
-
|
|
15721
|
-
|
|
15713
|
+
get refs() {
|
|
15714
|
+
return this._refs;
|
|
15715
|
+
}
|
|
15722
15716
|
|
|
15723
|
-
|
|
15724
|
-
|
|
15725
|
-
|
|
15717
|
+
get length() {
|
|
15718
|
+
return this._data.length;
|
|
15719
|
+
}
|
|
15726
15720
|
|
|
15727
|
-
|
|
15728
|
-
|
|
15729
|
-
|
|
15730
|
-
|
|
15731
|
-
|
|
15732
|
-
|
|
15733
|
-
|
|
15734
|
-
|
|
15735
|
-
|
|
15736
|
-
|
|
15721
|
+
/**
|
|
15722
|
+
* Add data and references to this collection.
|
|
15723
|
+
* @param {{}} obj - data
|
|
15724
|
+
* @param {{}} ref - reference
|
|
15725
|
+
*/
|
|
15726
|
+
add(obj, ref) {
|
|
15727
|
+
this._data.push(obj);
|
|
15728
|
+
this._refs.push(ref);
|
|
15729
|
+
}
|
|
15730
|
+
};
|
|
15737
15731
|
|
|
15738
|
-
|
|
15739
|
-
return collection;
|
|
15740
|
-
}
|
|
15732
|
+
var collection = Collection$3;
|
|
15741
15733
|
|
|
15742
15734
|
var helpers;
|
|
15743
15735
|
var hasRequiredHelpers;
|
|
@@ -15746,7 +15738,7 @@ function requireHelpers () {
|
|
|
15746
15738
|
if (hasRequiredHelpers) return helpers;
|
|
15747
15739
|
hasRequiredHelpers = 1;
|
|
15748
15740
|
const FormulaError = requireError();
|
|
15749
|
-
const Collection =
|
|
15741
|
+
const Collection = collection;
|
|
15750
15742
|
|
|
15751
15743
|
const Types = {
|
|
15752
15744
|
NUMBER: 0,
|
|
@@ -25400,7 +25392,7 @@ var engineering = EngineeringFunctions;
|
|
|
25400
25392
|
|
|
25401
25393
|
const FormulaError$b = requireError();
|
|
25402
25394
|
const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
|
|
25403
|
-
const Collection$2 =
|
|
25395
|
+
const Collection$2 = collection;
|
|
25404
25396
|
const H$5 = FormulaHelpers$8;
|
|
25405
25397
|
|
|
25406
25398
|
const ReferenceFunctions$1 = {
|
|
@@ -37028,7 +37020,7 @@ var parsing = {
|
|
|
37028
37020
|
const FormulaError$4 = requireError();
|
|
37029
37021
|
const {Address: Address$1} = requireHelpers();
|
|
37030
37022
|
const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
|
|
37031
|
-
const Collection$1 =
|
|
37023
|
+
const Collection$1 = collection;
|
|
37032
37024
|
const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
|
|
37033
37025
|
const {NotAllInputParsedException} = require$$4;
|
|
37034
37026
|
|
|
@@ -37790,7 +37782,7 @@ var hooks$1 = {
|
|
|
37790
37782
|
const FormulaError$2 = requireError();
|
|
37791
37783
|
const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
|
|
37792
37784
|
const {Prefix, Postfix, Infix, Operators} = operators;
|
|
37793
|
-
const Collection =
|
|
37785
|
+
const Collection = collection;
|
|
37794
37786
|
const MAX_ROW = 1048576, MAX_COLUMN = 16384;
|
|
37795
37787
|
|
|
37796
37788
|
let Utils$1 = class Utils {
|