floraachy
/
console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update cluster_card chart style

This commit is contained in:
shiyang 2021-10-29 17:44:43 +08:00
parent 68a8bdc003
commit 10d2a22e70
2 changed files with 107 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
web/src/pages/Cluster/components/cluster_card.js
View File

@ -1,7 +1,69 @@
import './cluster_card.scss';
import React from "react";
import {
MiniArea, Pie
} from '@/components/Charts';
const ClusterCard = ()=>{
return (
const dataLine1 = [
{
x:"1991",
y: 10
},
{
x:"1992",
y: 161
},
{
x:"1993",
y: 120
},
{
x:"1994",
y: 190
},
{
x:"1995",
y: 50
},
{
x:"1996",
y: 80
},
{
x:"1997",
y: 130
},
{
x:"1998",
y: 200
},
{
x:"1999",
y: 140
},
{
x:"2000",
y: 90
},
{
x:"2001",
y: 40
},
{
x:"2002",
y: 100
},
{
x:"2003",
y: 10
}
];
return (
<div class="cluster-item">
<div class="cluster-name">
<span>Cluster A</span>
@ -41,12 +103,40 @@ const ClusterCard = ()=>{
<div class="cluster-chart">
<div class="chart-top">
<div class="pie-chart">
<div class="item pie1"></div>
<div class="item pie2"></div>
<div class="item pie1">
<Pie
animate={false}
color={'#a9b108'}
inner={0.55}
tooltip={false}
margin={[0, 0, 0, 0]}
percent={0.75 * 100}
height={80}
total={'75%'}
/>
</div>
<div class="item pie2">
<Pie
animate={false}
color={'#a9b108'}
inner={0.55}
tooltip={false}
margin={[0, 0, 0, 0]}
percent={0.96 * 100}
height={80}
total={'96%'}
/>
</div>
</div>
<div class="line-chart">
<div class="item line1"></div>
<div class="item line2"></div>
<div class="item line1">
<MiniArea color="#efe6e6" height={40} data={dataLine1} />
<div class="line-subtitle">200k search/s</div>
</div>
<div class="item line2">
<MiniArea color="#efe6e6" height={40} data={dataLine1} />
<div class="line-subtitle">200k indexing/s</div>
</div>
</div>
</div>
<div class="chart-bottom">

17
web/src/pages/Cluster/components/cluster_card.scss
View File

@ -96,16 +96,16 @@
width: 50%;
display: flex;
justify-content: space-between;
background-color: lightgray;
//background-color: lightgray;
}
.cluster-item .cluster-chart .chart-top .pie-chart .item {
width: 50%;
}
.cluster-item .cluster-chart .chart-top .pie-chart .item.pie1{
background-color: goldenrod;
//background-color: goldenrod;
}
.cluster-item .cluster-chart .chart-top .pie-chart .item.pie2{
background-color: greenyellow;
//background-color: greenyellow;
}
.cluster-item .cluster-chart .chart-top .line-chart {
height: 80px;
@ -117,11 +117,18 @@
height: 40px;
width: 100%;
}
.cluster-item .cluster-chart .chart-top .line-chart .item .line-subtitle{
margin-top: -5px;
text-align: center;
font-size: 10px;
}
.cluster-item .cluster-chart .chart-top .line-chart .item.line1{
background-color: #ff8080;
//background-color: #ff8080;
margin-top: -10px;
}
.cluster-item .cluster-chart .chart-top .line-chart .item.line2{
background-color: lightseagreen;
//background-color: lightseagreen;
}
.cluster-item .cluster-chart .chart-bottom {
height: 26px;