DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(@omiu/chart-card): support content, data and labels props

This commit is contained in:
dntzhang 2021-08-01 19:11:15 +08:00
parent ea5d2a3026
commit 6c4f1b4ef3
4 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/chart-card/index.html
View File

@ -6,9 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omiu Chart Card</title>
<script type="module" src="/src/index.tsx"></script>
<script src="https://cdn.jsdelivr.net/npm/omi"></script>
<script src="https://cdn.jsdelivr.net/npm/@omiu/icon@0.0.2/people.js"></script>
</head>
<body style="background-color: #eee">
<o-chart-card color="#39f"></o-chart-card>
<o-chart-card content="9987" describe="Members online" color="#39f" data="[12, 19, 3, 5, 2, 3]" labels="['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']">
<o-icon-people width="2em" height="2em" style="font-size: 3em;"></o-icon-people>
</o-chart-card>
</body>
</html>

2
components/chart-card/src/index.css
View File

@ -96,3 +96,5 @@ canvas {
[class^=text-value] {
font-weight: 600;
}
/*# sourceMappingURL=index.css.map */

2
components/chart-card/src/index.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAGE;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA","file":"index.css"}
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"index.css"}

30
components/chart-card/src/index.tsx
View File

@ -5,6 +5,10 @@ import * as css from './index.scss'
import '@omiu/chart'
export interface Props {
color: string
content: string | number
describe: string
labels: string[]
data: number[]
}
@tag('o-chart-card')
@ -16,14 +20,18 @@ export default class ChartCard extends WeElement<Props> {
}
static propTypes = {
color: String
color: String,
labels: Array,
data: Array,
content: String,
describe: String
}
chartData = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
labels: null,
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
// label: '# of Votes',
data: null,
segment: {
borderColor: 'white',
},
@ -38,6 +46,8 @@ export default class ChartCard extends WeElement<Props> {
display: false
}
},
// https://www.chartjs.org/docs/latest/configuration/responsive.html
// Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false.
maintainAspectRatio: false,
scales: {
yAxes: { display: false },
@ -47,21 +57,19 @@ export default class ChartCard extends WeElement<Props> {
render(props: Props) {
this.chartData.labels = props.labels
this.chartData.datasets[0].data = props.data
return <div class="card text-white" style={{ backgroundColor: props.color }}>
<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start">
<div>
<div class="text-value-lg">9823</div>
<div>Members online</div>
<div class="text-value-lg">{props.content}</div>
<div>{props.describe}</div>
</div>
<div class="icon">
<slot>ICON</slot>
</div>
</div>
<div class="c-chart-wrapper mt-3 mx-3" >
{/*
https://www.chartjs.org/docs/latest/configuration/responsive.html
Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false.
*/}
<o-line ignoreAttrs={true} height="70" data={this.chartData} options={this.chartOptions}></o-line>
</div>
@ -72,6 +80,6 @@ export default class ChartCard extends WeElement<Props> {
declare global {
interface HTMLElementTagNameMap {
'o-cascader': ChartCard
'o-chart-card': ChartCard
}
}