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 './cluster_card.scss';
import React from "react";
import {
MiniArea, Pie
} from '@/components/Charts';
const ClusterCard = ()=>{ 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-item">
<div class="cluster-name"> <div class="cluster-name">
<span>Cluster A</span> <span>Cluster A</span>
@ -41,12 +103,40 @@ const ClusterCard = ()=>{
<div class="cluster-chart"> <div class="cluster-chart">
<div class="chart-top"> <div class="chart-top">
<div class="pie-chart"> <div class="pie-chart">
<div class="item pie1"></div> <div class="item pie1">
<div class="item pie2"></div> <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>
<div class="line-chart"> <div class="line-chart">
<div class="item line1"></div> <div class="item line1">
<div class="item line2"></div> <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> </div>
<div class="chart-bottom"> <div class="chart-bottom">

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

@ -96,16 +96,16 @@
width: 50%; width: 50%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: lightgray; //background-color: lightgray;
} }
.cluster-item .cluster-chart .chart-top .pie-chart .item { .cluster-item .cluster-chart .chart-top .pie-chart .item {
width: 50%; width: 50%;
} }
.cluster-item .cluster-chart .chart-top .pie-chart .item.pie1{ .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{ .cluster-item .cluster-chart .chart-top .pie-chart .item.pie2{
background-color: greenyellow; //background-color: greenyellow;
} }
.cluster-item .cluster-chart .chart-top .line-chart { .cluster-item .cluster-chart .chart-top .line-chart {
height: 80px; height: 80px;
@ -117,11 +117,18 @@
height: 40px; height: 40px;
width: 100%; 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{ .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{ .cluster-item .cluster-chart .chart-top .line-chart .item.line2{
background-color: lightseagreen; //background-color: lightseagreen;
} }
.cluster-item .cluster-chart .chart-bottom { .cluster-item .cluster-chart .chart-bottom {
height: 26px; height: 26px;