Skip to content

Commit f8a5cd5

Browse files
graphierosgraphieros
committed
Fix - VueUiHorizontalBar - Improve responsive behaviour (full component rewrite) #272 
1 parent c6d2500 commit f8a5cd5

15 files changed

+2121
-38
lines changed

TestingArena/ArenaVueUiVerticalBar.vue renamed to TestingArena/ArenaVueUiHorizontalBar.vue

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup>
22
import { ref, computed, onMounted } from "vue";
3-
import LocalVueUiVerticalBar from '../src/components/vue-ui-vertical-bar.vue';
43
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
54
import Box from "./Box.vue";
65
import convertArrayToObject from "./convertModel";
@@ -9,6 +8,8 @@ import { useArena } from "../src/useArena";
98
import { VueUiHorizontalBar } from "vue-data-ui";
109
import { VueUiHorizontalBar as VueUiHorizontalBarTreeshaken } from "vue-data-ui/vue-ui-horizontal-bar";
1110
11+
import LocalVueUiHorizontalBar from "../src/components/vue-ui-horizontal-bar.vue";
12+
1213
const { local, build, vduiLocal, vduiBuild, toggleTable, toggleSort } = useArena()
1314
1415
const dataset = ref([])
@@ -18,11 +19,11 @@ onMounted(() => {
1819
dataset.value =[
1920
{
2021
name: "Serie 1 with",
21-
value: 100.987987,
22+
value: 220,
2223
children: [
2324
{
2425
name: "serie 1 child 1",
25-
value: 12
26+
value: 200
2627
},
2728
{
2829
name: "serie 1 child 2",
@@ -112,7 +113,7 @@ function alterDataset() {
112113
const model = ref([
113114
{ key: 'debug', def: true, type: 'checkbox'},
114115
{ key: 'loading', def: false, type: 'checkbox'},
115-
{ key: 'autoSize', def: true, type: 'checkbox'},
116+
{ key: 'autoSize', def: false, type: 'checkbox'},
116117
{ key: 'responsive', def: false, type: 'checkbox'},
117118
{ key: 'userOptions.show', def: true, type: 'checkbox'},
118119
{ key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
@@ -134,7 +135,7 @@ const model = ref([
134135
{ key: 'style.chart.layout.bars.sort', def: 'desc', type: 'select', options: ['asc', 'desc', 'none']},
135136
{ key: 'style.chart.layout.bars.useStroke', def: false, type: 'checkbox'},
136137
{ key: 'style.chart.layout.bars.strokeWidth', def: 2, type: 'number', min: 0, max: 12},
137-
{ key: 'style.chart.layout.bars.height', def: 56, type: 'number', min: 12, max: 64},
138+
{ key: 'style.chart.layout.bars.height', def: 32, type: 'number', min: 12, max: 64},
138139
{ key: 'style.chart.layout.bars.gap', def: 6, type: 'number', min: 0, max: 24},
139140
{ key: 'style.chart.layout.bars.borderRadius', def: 4, type: 'range', min: 0, max: 48}, // IDEA: max could be based on height to always be harmonious
140141
{ key: 'style.chart.layout.bars.offsetX', def: 0, type: 'number', min: 0, max: 100},
@@ -156,13 +157,13 @@ const model = ref([
156157
{ key: 'style.chart.layout.bars.nameLabels.show', def: true, type: 'checkbox'},
157158
{ key: 'style.chart.layout.bars.nameLabels.color', def: '#1A1A1A', type: 'color'},
158159
{ key: 'style.chart.layout.bars.nameLabels.bold', def: false, type: 'checkbox'},
159-
{ key: 'style.chart.layout.bars.nameLabels.fontSize', def: 20, type: 'range', min: 8, max: 48},
160-
{ key: 'style.chart.layout.bars.nameLabels.offsetX', def: -12, type: 'number', min: -100, max: 100},
160+
{ key: 'style.chart.layout.bars.nameLabels.fontSize', def: 14, type: 'range', min: 8, max: 48},
161+
{ key: 'style.chart.layout.bars.nameLabels.offsetX', def: 0, type: 'number', min: -100, max: 100},
161162
{ key: 'style.chart.layout.bars.parentLabels.show', def: true, type: 'checkbox'},
162163
{ key: 'style.chart.layout.bars.parentLabels.color', def: '#1A1A1A', type: 'color'},
163164
{ key: 'style.chart.layout.bars.parentLabels.bold', def: false, type: 'checkbox'},
164165
{ key: 'style.chart.layout.bars.parentLabels.fontSize', def: 14, type: 'range', min: 8, max: 48},
165-
{ key: 'style.chart.layout.bars.parentLabels.offsetX', def: 24, type: 'number', min: -100, max: 100},
166+
{ key: 'style.chart.layout.bars.parentLabels.offsetX', def: 0, type: 'number', min: -100, max: 100},
166167
{ key: 'style.chart.layout.highlighter.color', def: '#1A1A1A', type: 'color'},
167168
{ key: 'style.chart.layout.highlighter.opacity', def: 5, type: 'range', min: 0, max: 100},
168169
{ key: 'style.chart.layout.separators.show', def: true, type: 'checkbox'},
@@ -178,7 +179,7 @@ const model = ref([
178179
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
179180
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
180181
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
181-
{ key: 'style.chart.legend.position', def: 'top', type: 'select', options: ['top', 'bottom']},
182+
{ key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
182183
{ key: 'style.chart.legend.show', def: true, type: 'checkbox' },
183184
{ key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
184185
{ key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
@@ -338,7 +339,7 @@ onMounted(async () => {
338339
</div>
339340

340341
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
341-
<LocalVueUiVerticalBar :key="`responsive_${step}`" :dataset="dataset" :config="{
342+
<LocalVueUiHorizontalBar :key="`responsive_${step}`" :dataset="dataset" :config="{
342343
...config,
343344
responsive: true
344345
}">
@@ -366,18 +367,18 @@ onMounted(async () => {
366367
SOURCE: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, molestiae perspiciatis nam quae libero, deserunt in aperiam unde officia sint saepe laboriosam ducimus aspernatur labore! Sapiente aspernatur corrupti quis ad.
367368
</div>
368369
</template> -->
369-
</LocalVueUiVerticalBar>
370+
</LocalVueUiHorizontalBar>
370371
</div>
371372

372373
<Box comp="VueUiVerticalBar" :dataset="dataset">
373374
<template #title>VueUiVerticalBar</template>
374375

375376
<template #theme>
376-
<LocalVueUiVerticalBar :dataset="dataset" :config="configTheme" />
377+
<LocalVueUiHorizontalBar :dataset="dataset" :config="configTheme" />
377378
</template>
378379

379380
<template #local>
380-
<LocalVueUiVerticalBar :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`local_${step}`" @selectLegend="selectLegend" ref="local">
381+
<LocalVueUiHorizontalBar :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`local_${step}`" @selectLegend="selectLegend" ref="local">
381382
<template #optionSort>
382383
SORT
383384
</template>
@@ -402,7 +403,7 @@ onMounted(async () => {
402403
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
403404
#AFTER {{ series.name }}
404405
</template>
405-
</LocalVueUiVerticalBar>
406+
</LocalVueUiHorizontalBar>
406407
</template>
407408

408409
<template #VDUI-local>

‎cypress/fixtures/vdui-components.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1962,7 +1962,7 @@ export const components = [
19621962
wrapperClass: ".vue-ui-treemap",
19631963
},
19641964
{
1965-
name: "VueUiVerticalBar",
1965+
name: "VueUiHorizontalBar",
19661966
dataset: [
19671967
{
19681968
name: "Serie 1",

‎src/App.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import ArenaVueUiWheel from "../TestingArena/ArenaVueUiWheel.vue";
1212
import ArenaVueUiTiremarks from "../TestingArena/ArenaVueUiTiremarks.vue";
1313
import ArenaVueUiChestnut from "../TestingArena/ArenaVueUiChestnut.vue";
1414
import ArenaVueUiOnion from "../TestingArena/ArenaVueUiOnion.vue";
15-
import ArenaVueUiVerticalBar from "../TestingArena/ArenaVueUiVerticalBar.vue";
15+
import ArenaVueUiHorizontalBar from "../TestingArena/ArenaVueUiHorizontalBar.vue";
1616
import ArenaVueUiHeatmap from "../TestingArena/ArenaVueUiHeatmap.vue";
1717
import ArenaVueUiScatter from "../TestingArena/ArenaVueUiScatter.vue";
1818
import ArenaVueUiCandlestick from "../TestingArena/ArenaVueUiCandlestick.vue";
@@ -80,7 +80,7 @@ const mapping = ref({
8080
VueUiTiremarks: markRaw(ArenaVueUiTiremarks),
8181
VueUiChestnut: markRaw(ArenaVueUiChestnut),
8282
VueUiOnion: markRaw(ArenaVueUiOnion),
83-
VueUiVerticalBar: markRaw(ArenaVueUiVerticalBar),
83+
VueUiHorizontalBar: markRaw(ArenaVueUiHorizontalBar),
8484
VueUiHeatmap: markRaw(ArenaVueUiHeatmap),
8585
VueUiScatter: markRaw(ArenaVueUiScatter),
8686
VueUiCandlestick: markRaw(ArenaVueUiCandlestick),
@@ -130,7 +130,7 @@ const mapping = ref({
130130
})
131131
132132
const options = computed(() => Object.keys(mapping.value));
133-
const selectedComponent = ref('VueUiStackline');
133+
const selectedComponent = ref('VueUiHorizontalBar');
134134
135135
/**
136136
* Legacy testing arena where some non chart components can be tested

‎src/TestingArena.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import QuadrantTest from "./components/vue-ui-quadrant.vue";
2222
import GaugeTest from "./components/vue-ui-gauge.vue";
2323
import ChestnutTest from "./components/vue-ui-chestnut.vue";
2424
import OnionTest from "./components/vue-ui-onion.vue";
25-
import VerticalTest from "./components/vue-ui-vertical-bar.vue";
25+
import HorizontalTest from "./components/vue-ui-horizontal-bar.vue";
2626
import RatingTest from "./components/vue-ui-rating.vue";
2727
import SkeletonTest from "./components/vue-ui-skeleton.vue";
2828
import SparklineTest from "./components/vue-ui-sparkline.vue";

‎src/components/vue-data-ui.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ const components = {
4949
VueUiThermometer: defineAsyncComponent(() => import('./vue-ui-thermometer.vue')),
5050
VueUiTiremarks: defineAsyncComponent(() => import('./vue-ui-tiremarks.vue')),
5151
VueUiTreemap: defineAsyncComponent(() => import('./vue-ui-treemap.vue')),
52-
VueUiVerticalBar: defineAsyncComponent(() => import('./vue-ui-vertical-bar.vue')), // delete in v4
53-
VueUiHorizontalBar: defineAsyncComponent(() => import('./vue-ui-vertical-bar.vue')), // v3 renaming
52+
VueUiVerticalBar: defineAsyncComponent(() => import('./vue-ui-horizontal-bar.vue')), // legacy support
53+
VueUiHorizontalBar: defineAsyncComponent(() => import('./vue-ui-horizontal-bar.vue')), // v3 renaming
5454
VueUiWaffle: defineAsyncComponent(() => import('./vue-ui-waffle.vue')),
5555
VueUiWheel: defineAsyncComponent(() => import('./vue-ui-wheel.vue')),
5656
VueUiXy: defineAsyncComponent(() => import('./vue-ui-xy.vue')),

‎src/components/vue-ui-dashboard.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ const builtInComponents = {
5454
VueUiTimer : defineAsyncComponent(() => import("../components/vue-ui-timer.vue")),
5555
VueUiTiremarks : defineAsyncComponent(() => import("../components/vue-ui-tiremarks.vue")),
5656
VueUiTreemap : defineAsyncComponent(() => import("../components/vue-ui-treemap.vue")),
57-
VueUiVerticalBar : defineAsyncComponent(() => import("../components/vue-ui-vertical-bar.vue")),
58-
VueUiHorizontalBar : defineAsyncComponent(() => import("../components/vue-ui-vertical-bar.vue")),
57+
VueUiVerticalBar : defineAsyncComponent(() => import("../components/vue-ui-horizontal-bar.vue")),
58+
VueUiHorizontalBar : defineAsyncComponent(() => import("../components/vue-ui-horizontal-bar.vue")),
5959
VueUiWaffle : defineAsyncComponent(() => import("../components/vue-ui-waffle.vue")),
6060
VueUiWheel : defineAsyncComponent(() => import("../components/vue-ui-wheel.vue")),
6161
VueUiWordCloud : defineAsyncComponent(() => import("../components/vue-ui-word-cloud.vue")),
@@ -64,6 +64,7 @@ const builtInComponents = {
6464
VueUiCarouselTable : defineAsyncComponent(() => import('../components/vue-ui-carousel-table.vue')),
6565
VueUiGizmo : defineAsyncComponent(() => import('../components/vue-ui-gizmo.vue')),
6666
VueUiStackbar : defineAsyncComponent(() => import('../components/vue-ui-stackbar.vue')),
67+
VueUiStackline : defineAsyncComponent(() => import('../components/vue-ui-stackline.vue')),
6768
VueUiBullet : defineAsyncComponent(() => import('../components/vue-ui-bullet.vue')),
6869
VueUiFunnel : defineAsyncComponent(() => import('../components/vue-ui-funnel.vue')),
6970
VueUiHistoryPlot : defineAsyncComponent(() => import('../components/vue-ui-history-plot.vue')),

src/components/vue-ui-vertical-bar.cy.js renamed to src/components/vue-ui-horizontal-bar.cy.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import VueUiVerticalBar from './vue-ui-vertical-bar.vue';
1+
import VueUiHorizontalBar from './vue-ui-horizontal-bar.vue';
22
import { components } from '../../cypress/fixtures/vdui-components';
33
import { testCommonFeatures } from '../../cypress/fixtures';
44

5-
const { config, dataset } = components.find(c => c.name === 'VueUiVerticalBar');
5+
const { config, dataset } = components.find(c => c.name === 'VueUiHorizontalBar');
66

7-
describe('<VueUiVerticalBar />', () => {
7+
describe('<VueUiHorizontalBar />', () => {
88
it('renders', () => {
9-
cy.mount(VueUiVerticalBar, {
9+
cy.mount(VueUiHorizontalBar, {
1010
props: {
1111
dataset,
1212
config
@@ -35,7 +35,7 @@ describe('<VueUiVerticalBar />', () => {
3535
});
3636

3737
it('emits', () => {
38-
cy.mount(VueUiVerticalBar, {
38+
cy.mount(VueUiHorizontalBar, {
3939
props: {
4040
dataset,
4141
config

0 commit comments

Comments
 (0)