Skip to content

Commit efdf76f

Browse files
graphierosgraphieros
committed
Added rotating xLabel option to VueUiXy and VueUiQuickChart
1 parent 7bd1b33 commit efdf76f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+200
-140
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": "2.1.8",
4+
"version": "2.1.9",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2659,6 +2659,14 @@ const donutConfig = ref({
26592659
26602660
const xyConfig = ref({
26612661
chart: {
2662+
grid: {
2663+
labels: {
2664+
xAxisLabels: {
2665+
rotation: 0,
2666+
values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
2667+
}
2668+
}
2669+
},
26622670
labels: {
26632671
fontSize: 30
26642672
},
@@ -3321,7 +3329,8 @@ const quickDatasetBar = ref([
33213329
33223330
const quickConfig = ref({
33233331
title: 'Some title that can be kinda long',
3324-
xyPeriods: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
3332+
xyPeriods: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
3333+
xyPeriodLabelsRotation: -20
33253334
})
33263335
33273336
</script>

‎src/atoms/BaseIcon.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup>
22
import { computed } from "vue";
3+
import { XMLNS } from "../lib";
34
45
const props = defineProps({
56
name: String,
@@ -145,7 +146,7 @@ const icons = computed(() => {
145146
</script>
146147

147148
<template>
148-
<svg :class="{ 'spin ': isSpin }" viewBox="0 0 20 20" :height="size" :width="size" v-html="icons[name]" style="background:transparent" />
149+
<svg :xmlns="XMLNS" :class="{ 'spin ': isSpin }" viewBox="0 0 20 20" :height="size" :width="size" v-html="icons[name]" style="background:transparent" />
149150
</template>
150151

151152
<style scoped>

‎src/components/vue-ui-3d-bar.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import {
1515
lightenHexColor,
1616
makeDonut,
1717
objectIsEmpty,
18-
palette
18+
palette,
19+
XMLNS
1920
} from '../lib';
2021
import pdf from "../pdf";
2122
import img from "../img";
@@ -545,7 +546,7 @@ defineExpose({
545546
@toggleTable="mutableConfig.showTable = !mutableConfig.showTable"
546547
/>
547548

548-
<svg v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="3d-bar-svg" :viewBox="`0 0 ${svg.absoluteWidth} ${svg.height}`" :style="`max-width:100%; overflow: visible; background:${barConfig.style.chart.backgroundColor};color:${barConfig.style.chart.color}`">
549+
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="3d-bar-svg" :viewBox="`0 0 ${svg.absoluteWidth} ${svg.height}`" :style="`max-width:100%; overflow: visible; background:${barConfig.style.chart.backgroundColor};color:${barConfig.style.chart.color}`">
549550

550551
<!-- DEFS -->
551552
<defs>

‎src/components/vue-ui-age-pyramid.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
isFunction,
1010
objectIsEmpty,
1111
opacity,
12-
shiftHue,
12+
shiftHue,
13+
XMLNS
1314
} from '../lib';
1415
import pdf from "../pdf";
1516
import img from "../img";
@@ -411,7 +412,7 @@ defineExpose({
411412
/>
412413

413414
<!-- CHART -->
414-
<svg v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`" >
415+
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`" >
415416
<defs>
416417
<linearGradient
417418
:id="`age_pyramid_left_${uid}`"

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import {
1111
isFunction,
1212
objectIsEmpty,
1313
opacity,
14-
shiftHue,
14+
shiftHue,
15+
XMLNS
1516
} from "../lib";
1617
import mainConfig from "../default_configs.json";
1718
import pdf from "../pdf";
@@ -469,7 +470,7 @@ defineExpose({
469470
/>
470471

471472
<!-- CHART -->
472-
<svg v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${candlestickConfig.style.backgroundColor};color:${candlestickConfig.style.color}`">
473+
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${candlestickConfig.style.backgroundColor};color:${candlestickConfig.style.color}`">
473474
<g v-if="drawableDataset.length > 0">
474475
<!-- DEFS -->
475476
<defs>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import {
1515
objectIsEmpty,
1616
opacity,
1717
palette,
18-
shiftHue,
18+
shiftHue,
19+
XMLNS
1920
} from "../lib";
2021
import pdf from "../pdf";
2122
import img from "../img";
@@ -521,7 +522,7 @@ defineExpose({
521522
@toggleTable="mutableConfig.showTable = !mutableConfig.showTable"
522523
/>
523524

524-
<svg :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" v-if="svg.height > 0 && isDataset" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${chestnutConfig.style.chart.backgroundColor};color:${chestnutConfig.style.chart.color}`" >
525+
<svg :xmlns="XMLNS" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" v-if="svg.height > 0 && isDataset" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${chestnutConfig.style.chart.backgroundColor};color:${chestnutConfig.style.chart.color}`" >
525526

526527
<!-- TITLE AS G -->
527528
<g v-if="!selectedNut">

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { computed, ref } from "vue";
33
import Digit from '../atoms/Digit.vue';
44
import mainConfig from "../default_configs.json"
55
import { useNestedProp } from "../useNestedProp";
6+
import { XMLNS } from "../lib";
67
78
const props = defineProps({
89
dataset: {
@@ -58,7 +59,7 @@ const maxY = computed(() => {
5859
</script>
5960

6061
<template>
61-
<svg :viewBox="`0 0 ${maxY} 80`" :style="`background:${digitConfig.backgroundColor};${digitConfig.height ? `height:${digitConfig.height};` : ''}${digitConfig.width ? `width:${digitConfig.width}` : ''}`">
62+
<svg :xmlns="XMLNS" :viewBox="`0 0 ${maxY} 80`" :style="`background:${digitConfig.backgroundColor};${digitConfig.height ? `height:${digitConfig.height};` : ''}${digitConfig.width ? `width:${digitConfig.width}` : ''}`">
6263
<Digit
6364
v-for="digit in digits"
6465
:x="digit.x"

‎src/components/vue-ui-donut-evolution.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import {
1616
objectIsEmpty,
1717
opacity,
1818
palette,
19-
sumByAttribute,
19+
sumByAttribute,
20+
XMLNS
2021
} from '../lib';
2122
import pdf from "../pdf";
2223
import img from "../img";
@@ -503,9 +504,8 @@ defineExpose({
503504
@generateImage="generateImage"
504505
@toggleTable="mutableConfig.showTable = !mutableConfig.showTable"
505506
/>
506-
507507
508-
<svg v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="donut-evolution-svg" :viewBox="`0 0 ${svg.absoluteWidth} ${svg.absoluteHeight}`" :style="`max-width:100%; overflow: visible; background:${donutEvolutionConfig.style.chart.backgroundColor};color:${donutEvolutionConfig.style.chart.color}`">
508+
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="donut-evolution-svg" :viewBox="`0 0 ${svg.absoluteWidth} ${svg.absoluteHeight}`" :style="`max-width:100%; overflow: visible; background:${donutEvolutionConfig.style.chart.backgroundColor};color:${donutEvolutionConfig.style.chart.color}`">
509509
510510
<defs>
511511
<linearGradient :id="`hover_${uid}`" x1="0%" y1="0%" x2="0%" y2="100%">

0 commit comments

Comments
 (0)