You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

78 lines
1.8 KiB

import React, { Component } from "react";
import "./index.scss";
// import ReactApexChart from "react-apexcharts";
// import ReactApexChart from "apexcharts";
import Chart from "react-apexcharts";
class SemiDonut extends Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
type: "donut",
},
3 years ago
legend: {
show: true,
position: "top",
3 years ago
},
3 years ago
labels: ["عکس", "صوتی", "ویدیو", "فایل های مختلف", "فضای خالی"],
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
offsetY: 10,
},
},
grid: {
padding: {
3 years ago
bottom: 0,
},
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},
],
},
3 years ago
series: [44, 44, 44, 44],
};
}
render() {
return (
3 years ago
<div className=" relative">
<Chart
options={this.state.options}
series={this.state.series}
type="donut"
height="320px"
width="100%"
className=""
/>
<span className="font-bold text-blue-400 text-lg absolute left-1/2 bottom-60 transform -translate-x-1/2 -translate-y-1/2">
899GB
</span>
<span
style={{ fontSize: "10px" }}
className="text-xs absolute left-1/2 bottom-56 transform -translate-x-1/2 -translate-y-1/2"
>
استفاده شده از 1000 گیگابایت
</span>
</div>
);
}
}
export default SemiDonut;