{boardId}
+
+ page one
+
+
+ page two
+
+
+
+ DIV with attribute
+
+
+
+
+ Nested DIV
+ -
+ {fields.map(({ name, label }) => {
+ return (
+
+
+
+ {columns.map(({ visitorCount, nodes }, columnIndex) => {
+ return (
+
+
+
+ );
+ })}
+
+
+ {columnIndex + 1}
+
+
+
+ {formatLongNumber(visitorCount)} {formatMessage(labels.visitors)}
+
+
+ {nodes.map(
+ ({
+ name,
+ totalCount,
+ selected,
+ active,
+ paths,
+ activeCount,
+ selectedCount,
+ lines,
+ }) => {
+ const nodeCount = selected
+ ? active
+ ? activeCount
+ : selectedCount
+ : totalCount;
+
+ const remaining =
+ columnIndex > 0
+ ? Math.round((nodeCount / columns[columnIndex - 1]?.visitorCount) * 100)
+ : 0;
+
+ const dropped = 100 - remaining;
+
+ return (
+
+
+ selected && setActiveNode({ name, columnIndex, paths })
+ }
+ onMouseLeave={() => selected && setActiveNode(null)}
+ >
+
+ );
+ },
+ )}
+ handleClick(name, columnIndex, paths)}
+ >
+
+ {name.startsWith('/') ?
+ {name}
+
+
+
+
+
+
+
+
+ {`${dropped}% ${formatMessage(labels.dropoff)}`}
+
+
+
+ {`${remaining}% ${formatMessage(labels.conversion)}`}
+
+
+
+
+
+ {columnIndex < columns.length &&
+ lines.map(([fromIndex, nodeIndex], i) => {
+ const height =
+ (Math.abs(nodeIndex - fromIndex) + 1) * (NODE_HEIGHT + NODE_GAP) -
+ NODE_GAP;
+ const midHeight =
+ (Math.abs(nodeIndex - fromIndex) - 1) * (NODE_HEIGHT + NODE_GAP) +
+ NODE_GAP +
+ LINE_WIDTH;
+ const nodeName = columns[columnIndex - 1]?.nodes[fromIndex].name;
+
+ return (
+ {formatLongNumber(nodeCount)}
+
+ path.items[columnIndex] === name &&
+ path.items[columnIndex - 1] === nodeName,
+ ),
+ [styles.up]: fromIndex < nodeIndex,
+ [styles.down]: fromIndex > nodeIndex,
+ [styles.flat]: fromIndex === nodeIndex,
+ })}
+ style={{ height }}
+ >
+
+
+
+
+ );
+ })}
+ {formatMessage(labels.pageNotFound)}
+{formatMessage(messages.error)}
+{error.message}
+{error.stack}
+
+ -
+ {fields
+ .filter(({ name }) => !exclude.includes(name))
+ .map(field => {
+ const isDisabled = !!value.find(({ name }) => name === field.name);
+ return (
+
- handleChange(id[0])}>
+ {data?.data?.map(item => {
+ return (
+
{getRow(data[index], index)}
;
+ };
+
+ return (
+