Skip to content

Commit

Permalink
Updated table layouts for most chart components
Browse files Browse the repository at this point in the history
  • Loading branch information
@graphieros
graphieros committed Jan 31, 2024
1 parent 0e6998c commit bdcf643
Show file tree
Hide file tree
Showing 21 changed files with 540 additions and 533 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "vue-data-ui",
"private": false,
"version": "1.9.71",
"version": "1.9.72",
"type": "module",
"description": "A user-empowering data visualization Vue components library",
"keywords": [
Expand Down
139 changes: 138 additions & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3887,6 +3887,14 @@ const moodRadarConfig = ref({
<BaseIcon name="chartCluster"/>
VueUiMolecule
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="labelOpen" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<MoleculeTest :dataset="clusterDataset"/>
</template>
Expand All @@ -3903,6 +3911,13 @@ const moodRadarConfig = ref({
<BaseIcon name="chartMoodRadar"/>
VueUiMoodRadar
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<MoodRadarTest :dataset="moodRadarDataset" :config="moodRadarConfig">
<template #svg="{ svg }">
Expand Down Expand Up @@ -3944,6 +3959,11 @@ const moodRadarConfig = ref({
<BaseIcon name="chart3dBar"/>
VueUi3dBar
</template>
<template #info>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<Bar3dTest :dataset="bar3dDataset">
<template #svg="{ svg }">
Expand Down Expand Up @@ -3981,11 +4001,18 @@ const moodRadarConfig = ref({
</template>
</Box>

<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_donut_evolution)">
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_donut_evolution)">
<template #title>
<BaseIcon name="chartDonutEvolution"/>
VueUiDonutEvolution
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<DonutEvolutionTest
:dataset="donutEvolutionDataset"
Expand Down Expand Up @@ -4014,6 +4041,11 @@ const moodRadarConfig = ref({
<BaseIcon name="chartTiremarks"/>
VueUiTiremarks
</template>
<template #info>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<TireTest
:dataset="tiremarksDataset"
Expand Down Expand Up @@ -4067,6 +4099,11 @@ const moodRadarConfig = ref({
<BaseIcon name="chartWheel"/>
VueUiWheel
</template>
<template #info>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<WheelTest
ref="rings"
Expand Down Expand Up @@ -4099,6 +4136,13 @@ const moodRadarConfig = ref({
<BaseIcon name="chartRings" />
VueUiRings
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<RingsTest
ref="rings"
Expand Down Expand Up @@ -4131,6 +4175,11 @@ const moodRadarConfig = ref({
<BaseIcon name="chartRelationCircle"/>
VueUiRelationCircle
</template>
<template #info>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<RelationTest
ref="relation"
Expand Down Expand Up @@ -4193,6 +4242,14 @@ const moodRadarConfig = ref({
<BaseIcon name="chartLine" />
VueUiXy
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="labelOpen" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<XyTest
ref="xytest"
Expand Down Expand Up @@ -4251,6 +4308,13 @@ const moodRadarConfig = ref({
<BaseIcon name="chartCandlestick" />
VueUiCandleStick
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<CandlestickTest
ref="candlestick"
Expand Down Expand Up @@ -4283,6 +4347,13 @@ const moodRadarConfig = ref({
<BaseIcon name="chartScatter" />
VueUiScatter
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<ScatterTest
ref="scatter"
Expand Down Expand Up @@ -4315,6 +4386,14 @@ const moodRadarConfig = ref({
<BaseIcon name="chartVerticalBar" />
VueUiVerticalBar
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#ff6347"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="sort" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<VerticalTest
ref="verticaltest"
Expand Down Expand Up @@ -4348,6 +4427,13 @@ const moodRadarConfig = ref({
<BaseIcon name="chartOnion" />
VueUiOnion
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<OnionTest
:config="{ useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}} }"
Expand Down Expand Up @@ -4381,6 +4467,14 @@ const moodRadarConfig = ref({
<BaseIcon name="chartQuadrant" />
VueUiQuadrant
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="labelOpen" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<QuadrantTest
ref="quadranttest"
Expand Down Expand Up @@ -4419,6 +4513,13 @@ const moodRadarConfig = ref({
<BaseIcon name="chartRadar" />
VueUiRadar
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<RadarTest
ref="radartest"
Expand Down Expand Up @@ -4453,6 +4554,14 @@ const moodRadarConfig = ref({
<BaseIcon name="chartDonut" />
VueUiDonut
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="labelOpen" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<DonutTest
ref="donuttest"
Expand Down Expand Up @@ -4615,6 +4724,13 @@ const moodRadarConfig = ref({
<BaseIcon name="chartChestnut" />
VueUiChestnut
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#ff6347"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<ChestnutTest
ref="chestnuttest"
Expand Down Expand Up @@ -4651,6 +4767,13 @@ const moodRadarConfig = ref({
<BaseIcon name="chartAgePyramid" />
VueUiAgePyramid
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<PyramidTest
ref="pyramid"
Expand Down Expand Up @@ -4683,6 +4806,13 @@ const moodRadarConfig = ref({
<BaseIcon name="chartWaffle"/>
VueUiWaffle
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#5f8bee"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<WaffleTest
ref="waffletest"
Expand Down Expand Up @@ -4834,6 +4964,13 @@ const moodRadarConfig = ref({
<BaseIcon name="chartHeatmap"/>
VueUiHeatmap
</template>
<template #info>
<BaseIcon name="chartTable" stroke="#ff6347"/>
<BaseIcon name="pdf" stroke="#5f8bee"/>
<BaseIcon name="image" stroke="#5f8bee"/>
<BaseIcon name="excel" stroke="#5f8bee"/>
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
</template>
<template #dev>
<HeatmapTest
ref="heatmaptest"
Expand Down
9 changes: 7 additions & 2 deletions src/Box.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,13 @@ function copy() {
<div style="width: 100%;margin-top:12px; background: #2A2A2A;">
<details :open="open">
<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">
<div style="color:#42d392">
<slot name="title"></slot>
<div style="color:#42d392; display: flex; justify-content: space-between; width: 100%">
<div style="display: flex; align-items:center; gap:12px">
<slot name="title"></slot>
</div>
<div style="display: flex; align-items:center; gap: 12px">
<slot name="info"></slot>
</div>
</div>
</summary>
<div style="display: flex; flex-direction: row; gap: 24px; align-items:center;justify-content:center; padding: 24px">
Expand Down
10 changes: 5 additions & 5 deletions src/atoms/DataTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ onMounted(() => {
{{ title }}
</caption>
<thead>
<tr>
<th :style="{backgroundColor: thbg, color: thc, outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
<tr role="row" style="font-variant-numeric: tabular-nums">
<th role="cell" :style="{backgroundColor: thbg, color: thc, outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
<div style="display: flex; align-items:center; justify-content:center; justify-content:flex-end;padding-right: 3px; gap:3px">
<svg height="12" width="12" v-if="th.color" viewBox="0 0 20 20" style="background: none;">
<circle cx="10" cy="10" r="10" :fill="th.color"/>
Expand All @@ -59,15 +59,15 @@ onMounted(() => {
</thead>

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

0 comments on commit bdcf643

Please sign in to comment.