International E-commerce Real-time Data
This is a visualization example that simulates real-time order flow data from an international e-commerce platform. The example shows the complete logistics chain from order placement to final delivery, including these key nodes:
- 🛍️ New Order Generation
- 🏭 Order Processing & Warehousing
- 📦 Shipping Preparation
- ✈️ International Transit
- 🛃 Customs Clearance
- 🚚 Final Delivery Status
The system generates a new random order every 4 seconds, including specific:
- Product information (brand and model)
- Order time
- Recipient information (name and city)
The animation effects in this example use the Flow type to visually demonstrate the order flow process through various stages.
Demo
Example Code
import {
AnimationType,
ICraftPlayer,
ICraftPlayerInstance
} from "@icraft/player-react";
import React, { useRef } from "react";
import { getEcommerceData } from "./utils";
const style = {
width: "100%",
height: "100%",
position: "relative" as const,
overflow: "hidden" as const,
};
const getCard = (value: string) => {
const card = document.createElement("div");
card.innerHTML = value;
card.style.cssText = `
padding: 12px 16px;
background: rgba(255, 255, 255, 0.95);
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
font-size: 14px;
color: #333;
max-width: 280px;
line-height: 1.5;
word-break: break-all;
`;
return card;
};
export default () => {
const playerRef = useRef<ICraftPlayerInstance>(null);
const timerRef = useRef<NodeJS.Timeout>();
const currentIndexRef = useRef(0);
const receiveData = async () => {
const player = playerRef.current;
if (!player) return;
const data = await getEcommerceData();
const { key, value } = data[currentIndexRef.current];
const line = player.getElementsByName(key)?.[0];
const card = getCard(value);
if (line) {
player.playAnimationByElementKey(line.key, {
animationType: AnimationType.Flow,
animationDuration: 3,
tipContent: card,
animationShowTip: true,
flowLineColor: "#1a73e8",
});
}
currentIndexRef.current = (currentIndexRef.current + 1) % data.length;
};
React.useEffect(() => {
timerRef.current = setInterval(receiveData, 4000);
return () => {
if (timerRef.current) {
clearInterval(timerRef.current);
}
};
}, []);
return (
<div style={style}>
<ICraftPlayer
src='/templates/E-commerce.iplayer'
ref={playerRef}
/>
</div>
);
};
