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.
77 lines
1.8 KiB
77 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", |
|
}, |
|
legend: { |
|
show: true, |
|
position: "top", |
|
}, |
|
labels: ["عکس", "صوتی", "ویدیو", "فایل های مختلف", "فضای خالی"], |
|
plotOptions: { |
|
pie: { |
|
startAngle: -90, |
|
endAngle: 90, |
|
offsetY: 10, |
|
}, |
|
}, |
|
grid: { |
|
padding: { |
|
bottom: 0, |
|
}, |
|
}, |
|
responsive: [ |
|
{ |
|
breakpoint: 480, |
|
options: { |
|
chart: { |
|
width: 200, |
|
}, |
|
legend: { |
|
position: "bottom", |
|
}, |
|
}, |
|
}, |
|
], |
|
}, |
|
series: [44, 44, 44, 44], |
|
}; |
|
} |
|
|
|
render() { |
|
return ( |
|
<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;
|
|
|