Skip to content

Commit bdcf643

Browse files
graphierosgraphieros
committed
Updated table layouts for most chart components
1 parent 0e6998c commit bdcf643

21 files changed

+540
-533
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "1.9.71",
4+
"version": "1.9.72",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 138 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3887,6 +3887,14 @@ const moodRadarConfig = ref({
38873887
<BaseIcon name="chartCluster"/>
38883888
VueUiMolecule
38893889
</template>
3890+
<template #info>
3891+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
3892+
<BaseIcon name="pdf" stroke="#5f8bee"/>
3893+
<BaseIcon name="image" stroke="#5f8bee"/>
3894+
<BaseIcon name="excel" stroke="#5f8bee"/>
3895+
<BaseIcon name="labelOpen" stroke="#5f8bee"/>
3896+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
3897+
</template>
38903898
<template #dev>
38913899
<MoleculeTest :dataset="clusterDataset"/>
38923900
</template>
@@ -3903,6 +3911,13 @@ const moodRadarConfig = ref({
39033911
<BaseIcon name="chartMoodRadar"/>
39043912
VueUiMoodRadar
39053913
</template>
3914+
<template #info>
3915+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
3916+
<BaseIcon name="pdf" stroke="#5f8bee"/>
3917+
<BaseIcon name="image" stroke="#5f8bee"/>
3918+
<BaseIcon name="excel" stroke="#5f8bee"/>
3919+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
3920+
</template>
39063921
<template #dev>
39073922
<MoodRadarTest :dataset="moodRadarDataset" :config="moodRadarConfig">
39083923
<template #svg="{ svg }">
@@ -3944,6 +3959,11 @@ const moodRadarConfig = ref({
39443959
<BaseIcon name="chart3dBar"/>
39453960
VueUi3dBar
39463961
</template>
3962+
<template #info>
3963+
<BaseIcon name="pdf" stroke="#5f8bee"/>
3964+
<BaseIcon name="image" stroke="#5f8bee"/>
3965+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
3966+
</template>
39473967
<template #dev>
39483968
<Bar3dTest :dataset="bar3dDataset">
39493969
<template #svg="{ svg }">
@@ -3981,11 +4001,18 @@ const moodRadarConfig = ref({
39814001
</template>
39824002
</Box>
39834003

3984-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_donut_evolution)">
4004+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_donut_evolution)">
39854005
<template #title>
39864006
<BaseIcon name="chartDonutEvolution"/>
39874007
VueUiDonutEvolution
39884008
</template>
4009+
<template #info>
4010+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
4011+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4012+
<BaseIcon name="image" stroke="#5f8bee"/>
4013+
<BaseIcon name="excel" stroke="#5f8bee"/>
4014+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4015+
</template>
39894016
<template #dev>
39904017
<DonutEvolutionTest
39914018
:dataset="donutEvolutionDataset"
@@ -4014,6 +4041,11 @@ const moodRadarConfig = ref({
40144041
<BaseIcon name="chartTiremarks"/>
40154042
VueUiTiremarks
40164043
</template>
4044+
<template #info>
4045+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4046+
<BaseIcon name="image" stroke="#5f8bee"/>
4047+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4048+
</template>
40174049
<template #dev>
40184050
<TireTest
40194051
:dataset="tiremarksDataset"
@@ -4067,6 +4099,11 @@ const moodRadarConfig = ref({
40674099
<BaseIcon name="chartWheel"/>
40684100
VueUiWheel
40694101
</template>
4102+
<template #info>
4103+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4104+
<BaseIcon name="image" stroke="#5f8bee"/>
4105+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4106+
</template>
40704107
<template #dev>
40714108
<WheelTest
40724109
ref="rings"
@@ -4099,6 +4136,13 @@ const moodRadarConfig = ref({
40994136
<BaseIcon name="chartRings" />
41004137
VueUiRings
41014138
</template>
4139+
<template #info>
4140+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
4141+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4142+
<BaseIcon name="image" stroke="#5f8bee"/>
4143+
<BaseIcon name="excel" stroke="#5f8bee"/>
4144+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4145+
</template>
41024146
<template #dev>
41034147
<RingsTest
41044148
ref="rings"
@@ -4131,6 +4175,11 @@ const moodRadarConfig = ref({
41314175
<BaseIcon name="chartRelationCircle"/>
41324176
VueUiRelationCircle
41334177
</template>
4178+
<template #info>
4179+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4180+
<BaseIcon name="image" stroke="#5f8bee"/>
4181+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4182+
</template>
41344183
<template #dev>
41354184
<RelationTest
41364185
ref="relation"
@@ -4193,6 +4242,14 @@ const moodRadarConfig = ref({
41934242
<BaseIcon name="chartLine" />
41944243
VueUiXy
41954244
</template>
4245+
<template #info>
4246+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
4247+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4248+
<BaseIcon name="image" stroke="#5f8bee"/>
4249+
<BaseIcon name="excel" stroke="#5f8bee"/>
4250+
<BaseIcon name="labelOpen" stroke="#5f8bee"/>
4251+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4252+
</template>
41964253
<template #dev>
41974254
<XyTest
41984255
ref="xytest"
@@ -4251,6 +4308,13 @@ const moodRadarConfig = ref({
42514308
<BaseIcon name="chartCandlestick" />
42524309
VueUiCandleStick
42534310
</template>
4311+
<template #info>
4312+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
4313+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4314+
<BaseIcon name="image" stroke="#5f8bee"/>
4315+
<BaseIcon name="excel" stroke="#5f8bee"/>
4316+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4317+
</template>
42544318
<template #dev>
42554319
<CandlestickTest
42564320
ref="candlestick"
@@ -4283,6 +4347,13 @@ const moodRadarConfig = ref({
42834347
<BaseIcon name="chartScatter" />
42844348
VueUiScatter
42854349
</template>
4350+
<template #info>
4351+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
4352+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4353+
<BaseIcon name="image" stroke="#5f8bee"/>
4354+
<BaseIcon name="excel" stroke="#5f8bee"/>
4355+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4356+
</template>
42864357
<template #dev>
42874358
<ScatterTest
42884359
ref="scatter"
@@ -4315,6 +4386,14 @@ const moodRadarConfig = ref({
43154386
<BaseIcon name="chartVerticalBar" />
43164387
VueUiVerticalBar
43174388
</template>
4389+
<template #info>
4390+
<BaseIcon name="chartTable" stroke="#ff6347"/>
4391+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4392+
<BaseIcon name="image" stroke="#5f8bee"/>
4393+
<BaseIcon name="excel" stroke="#5f8bee"/>
4394+
<BaseIcon name="sort" stroke="#5f8bee"/>
4395+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4396+
</template>
43184397
<template #dev>
43194398
<VerticalTest
43204399
ref="verticaltest"
@@ -4348,6 +4427,13 @@ const moodRadarConfig = ref({
43484427
<BaseIcon name="chartOnion" />
43494428
VueUiOnion
43504429
</template>
4430+
<template #info>
4431+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
4432+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4433+
<BaseIcon name="image" stroke="#5f8bee"/>
4434+
<BaseIcon name="excel" stroke="#5f8bee"/>
4435+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4436+
</template>
43514437
<template #dev>
43524438
<OnionTest
43534439
:config="{ useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}} }"
@@ -4381,6 +4467,14 @@ const moodRadarConfig = ref({
43814467
<BaseIcon name="chartQuadrant" />
43824468
VueUiQuadrant
43834469
</template>
4470+
<template #info>
4471+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
4472+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4473+
<BaseIcon name="image" stroke="#5f8bee"/>
4474+
<BaseIcon name="excel" stroke="#5f8bee"/>
4475+
<BaseIcon name="labelOpen" stroke="#5f8bee"/>
4476+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4477+
</template>
43844478
<template #dev>
43854479
<QuadrantTest
43864480
ref="quadranttest"
@@ -4419,6 +4513,13 @@ const moodRadarConfig = ref({
44194513
<BaseIcon name="chartRadar" />
44204514
VueUiRadar
44214515
</template>
4516+
<template #info>
4517+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
4518+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4519+
<BaseIcon name="image" stroke="#5f8bee"/>
4520+
<BaseIcon name="excel" stroke="#5f8bee"/>
4521+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4522+
</template>
44224523
<template #dev>
44234524
<RadarTest
44244525
ref="radartest"
@@ -4453,6 +4554,14 @@ const moodRadarConfig = ref({
44534554
<BaseIcon name="chartDonut" />
44544555
VueUiDonut
44554556
</template>
4557+
<template #info>
4558+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
4559+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4560+
<BaseIcon name="image" stroke="#5f8bee"/>
4561+
<BaseIcon name="excel" stroke="#5f8bee"/>
4562+
<BaseIcon name="labelOpen" stroke="#5f8bee"/>
4563+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4564+
</template>
44564565
<template #dev>
44574566
<DonutTest
44584567
ref="donuttest"
@@ -4615,6 +4724,13 @@ const moodRadarConfig = ref({
46154724
<BaseIcon name="chartChestnut" />
46164725
VueUiChestnut
46174726
</template>
4727+
<template #info>
4728+
<BaseIcon name="chartTable" stroke="#ff6347"/>
4729+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4730+
<BaseIcon name="image" stroke="#5f8bee"/>
4731+
<BaseIcon name="excel" stroke="#5f8bee"/>
4732+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4733+
</template>
46184734
<template #dev>
46194735
<ChestnutTest
46204736
ref="chestnuttest"
@@ -4651,6 +4767,13 @@ const moodRadarConfig = ref({
46514767
<BaseIcon name="chartAgePyramid" />
46524768
VueUiAgePyramid
46534769
</template>
4770+
<template #info>
4771+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
4772+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4773+
<BaseIcon name="image" stroke="#5f8bee"/>
4774+
<BaseIcon name="excel" stroke="#5f8bee"/>
4775+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4776+
</template>
46544777
<template #dev>
46554778
<PyramidTest
46564779
ref="pyramid"
@@ -4683,6 +4806,13 @@ const moodRadarConfig = ref({
46834806
<BaseIcon name="chartWaffle"/>
46844807
VueUiWaffle
46854808
</template>
4809+
<template #info>
4810+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
4811+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4812+
<BaseIcon name="image" stroke="#5f8bee"/>
4813+
<BaseIcon name="excel" stroke="#5f8bee"/>
4814+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4815+
</template>
46864816
<template #dev>
46874817
<WaffleTest
46884818
ref="waffletest"
@@ -4834,6 +4964,13 @@ const moodRadarConfig = ref({
48344964
<BaseIcon name="chartHeatmap"/>
48354965
VueUiHeatmap
48364966
</template>
4967+
<template #info>
4968+
<BaseIcon name="chartTable" stroke="#ff6347"/>
4969+
<BaseIcon name="pdf" stroke="#5f8bee"/>
4970+
<BaseIcon name="image" stroke="#5f8bee"/>
4971+
<BaseIcon name="excel" stroke="#5f8bee"/>
4972+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
4973+
</template>
48374974
<template #dev>
48384975
<HeatmapTest
48394976
ref="heatmaptest"

‎src/Box.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,13 @@ function copy() {
3131
<div style="width: 100%;margin-top:12px; background: #2A2A2A;">
3232
<details :open="open">
3333
<summary style="user-select:none;cursor:pointer;height:30px;background:linear-gradient(to right, #2A2A2A, #1A1A1A);line-height:24px;font-size:24px;padding:12px; display: flex; align-items:center; gap: 6px">
34-
<div style="color:#42d392">
35-
<slot name="title"></slot>
34+
<div style="color:#42d392; display: flex; justify-content: space-between; width: 100%">
35+
<div style="display: flex; align-items:center; gap:12px">
36+
<slot name="title"></slot>
37+
</div>
38+
<div style="display: flex; align-items:center; gap: 12px">
39+
<slot name="info"></slot>
40+
</div>
3641
</div>
3742
</summary>
3843
<div style="display: flex; flex-direction: row; gap: 24px; align-items:center;justify-content:center; padding: 24px">

‎src/atoms/DataTable.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ onMounted(() => {
4646
{{ title }}
4747
</caption>
4848
<thead>
49-
<tr>
50-
<th :style="{backgroundColor: thbg, color: thc, outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
49+
<tr role="row" style="font-variant-numeric: tabular-nums">
50+
<th role="cell" :style="{backgroundColor: thbg, color: thc, outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
5151
<div style="display: flex; align-items:center; justify-content:center; justify-content:flex-end;padding-right: 3px; gap:3px">
5252
<svg height="12" width="12" v-if="th.color" viewBox="0 0 20 20" style="background: none;">
5353
<circle cx="10" cy="10" r="10" :fill="th.color"/>
@@ -59,15 +59,15 @@ onMounted(() => {
5959
</thead>
6060

6161
<tbody>
62-
<tr v-for="(tr, i) in body">
63-
<td role="" v-for="(td, j) in tr" :data-cell="colNames[j]" :style="{backgroundColor: tdbg, color: tdc, outline: tdo}">
62+
<tr v-for="(tr, i) in body" role="row" style="font-variant-numeric: tabular-nums;">
63+
<td role="cell" v-for="(td, j) in tr" :data-cell="colNames[j].name || colNames[j]" :style="{backgroundColor: tdbg, color: tdc, outline: tdo}">
6464
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
6565
<svg height="12" width="12" v-if="td.color" viewBox="0 0 20 20" style="background: none;overflow: visible">
6666
<Shape
6767
:plot="{ x: 10, y: 10 }"
6868
:color="td.color"
6969
:radius="9"
70-
:shape="config.shape || 'circle'"
70+
:shape="config.shape || td.shape || 'circle'"
7171
/>
7272
</svg>
7373
<slot name="td" :td="td"></slot>

0 commit comments

Comments
 (0)