update cluster_card chart style
This commit is contained in:
parent
68a8bdc003
commit
10d2a22e70
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue