tailwind+react组件实现销售后台仪表盘效果代码-html代码-BFW代码库

tailwind+react组件实现销售后台仪表盘效果代码

代码语言：html

代码描述：tailwind+react组件实现销售后台仪表盘效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  
  
  
<style>
.half-circle-pie {
	display: block;
	width: 100%;
	max-width: 30rem;
	height: auto;
}
.icon {
	display: block;
	width: 1em;
	height: 1em;
}
</style>


  
  
</head>

  <body class="bg-gray-200 text-black dark:bg-gray-900 dark:text-white transition-colors duration-300">
	<div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
      <script type="text/babel">
       const { useEffect, useRef, useState,StrictMode} = window.React;
  const { createRoot } = window.ReactDOM;


class Formatter {
	static LOCALE = "en-US";
	static CURRENCY = "USD";

	static count(value) {
		return new Intl.NumberFormat(this.LOCALE).format(value);
	}

	static currency(value) {
		return new Intl.NumberFormat(this.LOCALE, {
			currency: this.CURRENCY,
			style: "currency",
			notation: "compact",
			maximumFractionDigits: 1
		}).format(value);
	}

	static percent(value) {
		return new Intl.NumberFormat(this.LOCALE, {
			maximumFractionDigits: 1,
			style: "percent"
		}).format(value);
	}

	static date(date) {
		return new Intl.DateTimeFormat(this.LOCALE, {
			dateStyle: "short"
		}).format(date);
	}
}

class Random {
	static random() {
		return crypto.getRandomValues(new Uint32Array(1))[0] / 2**32;
	}

	static float(min, max) {
		return (this.random() * (max - min)) + min;
	}

	static hash() {
		return Math.round(this.float(0,1) * 0xffff).toString(16);
	}

	static int(min, max) {
		return Math.floor(this.random() * (max - min)) + min;
	}
}

function fakeData() {
	const data = {
		overview: {
			top: Random.int(1,15) / 100,
			sales_goals: 0.672,
			number_of_sales: 2608,
			change: 0.035,
			total_sales: 42200,
			total_change: -0.045
		},
		users: [
			{
				name: "Jack O. Lantern",
				avatar: "https://assets.codepen.io/416221/photo-avatar1.jpg"
			},
			{
				name: "Jane Doe",
				avatar: "https://assets.codepen.io/416221/photo-avatar2.jpg"
			},
			{
				name: "Joe Schmoe",
				avatar: "https://assets.codepen.io/416221/photo-avatar3.jpg"
			}
		],
		performance: {
			history: []
		},
		convert_rate: 0.375,
		customer_calls: [
			{
				name: "Ann Thrax",
				vip: true,
				source: "TikTok Leads"
			}
		],
		sales_target: {
			target: 42200,
			streams: [
				{
					change: -0.2,
					revenue: 6800,
					source: "Instagram"
				},
				{
					change: -0.45,
					revenue: 8200,
					source: "Facebook"
				},
				{
					change: 0.7,
					revenue: 15400,
					source: "TikTok"
				},
				{
					change: -0.5,
					revenue: 11800,
					source: "Other"
				}
			]
		}
	};

	const historyPercents = [0.8,0.2,0.5,0.2,0.9,0.3,0.55,0.3,0.15,0.8,0.35,0.3,0.4,0.2,0.85,0.25,0.852];

	historyPercents.forEach((percent, i) => {
		const date = new Date();
		date.setDate(date.getDate() - (historyPercents.length - (i + 1)));
		data.performance.history.push({date, percent});
	});

	return data;
}

createRoot(document.getElementById("root")).render(
	<StrictMode>
		<IconSprites />
		<Dashboard data={fakeData()} />
	</StrictMode>
);

function ActionBar({ users }) {
	const newestUsers = users.slice(0,3);

	return (
		<div className="flex flex-col sm:flex-row justify-between gap-x-1 gap-y-3 mb-6">
			<div className="flex gap-1 items-center">
				{newestUsers.map((user, i) => (
					<Avatar key={i} {...user} indentStart={i > 0} />
				).........完整代码请登录后点击上方下载按钮下载查看