diff --git a/components/chart-card/index.html b/components/chart-card/index.html index e70b212d2..6fd7e58a3 100644 --- a/components/chart-card/index.html +++ b/components/chart-card/index.html @@ -6,9 +6,15 @@ Omiu Chart Card - + + + - + + + + + diff --git a/components/chart-card/src/index.css b/components/chart-card/src/index.css index c2843454d..5389e3c60 100755 --- a/components/chart-card/src/index.css +++ b/components/chart-card/src/index.css @@ -96,3 +96,5 @@ canvas { [class^=text-value] { font-weight: 600; } + +/*# sourceMappingURL=index.css.map */ diff --git a/components/chart-card/src/index.css.map b/components/chart-card/src/index.css.map index af777e76b..b14bcd7a3 100644 --- a/components/chart-card/src/index.css.map +++ b/components/chart-card/src/index.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/components/chart-card/src/index.tsx b/components/chart-card/src/index.tsx index e6a340f95..d758f09ce 100755 --- a/components/chart-card/src/index.tsx +++ b/components/chart-card/src/index.tsx @@ -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 { } 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 { 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 { render(props: Props) { + this.chartData.labels = props.labels + this.chartData.datasets[0].data = props.data return
-
9823
-
Members online
+
{props.content}
+
{props.describe}
ICON
- {/* - 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. - */}
@@ -72,6 +80,6 @@ export default class ChartCard extends WeElement { declare global { interface HTMLElementTagNameMap { - 'o-cascader': ChartCard + 'o-chart-card': ChartCard } }