Improvement - VueUiXy - Improve layout setup & responsive mode

Author: graphieros

TestingArena/ArenaVueUiXy.vue

@@ -400,10 +400,10 @@ const model = ref([
     { key: 'chart.zoom.startIndex', def: null, type: 'number', min: 0, max: 100 },
     { key: 'chart.zoom.endIndex', def: null, type: 'number', min: 0, max: 100 },
 
-    { key: 'chart.padding.top', def: 36, type: 'number', min: 0, max: 100, label: "top", category: 'padding' },
-    { key: 'chart.padding.right', def: 36, type: 'number', min: 0, max: 100, label: 'right', category: 'padding' },
-    { key: 'chart.padding.bottom', def: 64, type: 'number', min: 0, max: 100, label: 'bottom', category: 'padding' },
-    { key: 'chart.padding.left', def: 48, type: 'number', min: 0, max: 100, label: 'left', category: 'padding' },
+    { key: 'chart.padding.top', def: 0, type: 'number', min: 0, max: 100, label: "top", category: 'padding' },
+    { key: 'chart.padding.right', def: 0, type: 'number', min: 0, max: 100, label: 'right', category: 'padding' },
+    { key: 'chart.padding.bottom', def: 0, type: 'number', min: 0, max: 100, label: 'bottom', category: 'padding' },
+    { key: 'chart.padding.left', def: 0, type: 'number', min: 0, max: 100, label: 'left', category: 'padding' },
 
     { key: 'chart.highlighter.color', def: '#1A1A1A', type: 'color', label: 'highlighterColor', category: 'general' },
     { key: 'chart.highlighter.opacity', def: 5, type: 'range', min: 0, max: 100, label: 'highlighterOpacity', category: 'general' },
@@ -449,14 +449,14 @@ const model = ref([
     { key: 'chart.grid.labels.xAxisLabels.showOnlyFirstAndLast', def: false, type: 'checkbox', label: 'showOnlyFirstAndLast', category: 'grid' },
     { key: 'chart.grid.labels.xAxisLabels.yOffset', def: 24, type: 'number', min: -100, max: 100, label: 'offsetYPeriodLabels', category: 'grid' },
     { key: 'chart.grid.labels.xAxisLabels.rotation', def: 0, type: 'range', min: -360, max: 360, label: 'rotation', category: 'grid' },
-    { key: 'chart.grid.labels.axis.xLabelOffsetY', def: 24, type: 'number', min: -100, max: 100 },
+    { key: 'chart.grid.labels.axis.xLabelOffsetY', def: 0, type: 'number', min: -100, max: 100 },
 
     { key: 'chart.grid.labels.xAxisLabels.showOnlyAtModulo', def: false, type: 'checkbox' },
     { key: 'chart.grid.labels.xAxisLabels.modulo', def: 6, type: 'number' },
 
     { key: 'chart.grid.labels.yAxis.position', def: 'right', type: 'select', options: ['left', 'right'] },
     { key: 'chart.grid.labels.yAxis.commonScaleSteps', def: 10, min: 0, max: 100, type: 'number' },
-    { key: 'chart.grid.labels.yAxis.useIndividualScale', def: false, type: "checkbox" },
+    { key: 'chart.grid.labels.yAxis.useIndividualScale', def: true, type: "checkbox" },
     { key: 'chart.grid.labels.yAxis.stacked', def: false, type: 'checkbox' },
     { key: 'chart.grid.labels.yAxis.gap', def: 24, min: 0, max: 200, type: 'number' },
     { key: 'chart.grid.labels.yAxis.labelWidth', def: 48, min: 0, max: 100, type: 'number' },
@@ -466,7 +466,7 @@ const model = ref([
     { key: 'chart.grid.labels.yAxis.groupColor', def: '#1A1A1A', type: 'color' },
     { key: 'chart.grid.labels.yAxis.scaleLabelOffsetX', def: 36, type: 'number', min: -100, max: 100 },
     { key: 'chart.grid.labels.yAxis.scaleValueOffsetX', def: -20, type: 'number', min: -100, max: 100 },
-    { key: 'chart.grid.labels.yAxis.useNiceScale', def: true, type: 'checkbox'},
+    { key: 'chart.grid.labels.yAxis.useNiceScale', def: false, type: 'checkbox'},
 
     { key: 'chart.grid.labels.yAxis.showCrosshairs', def: true, type: 'checkbox'},
     { key: 'chart.grid.labels.xAxis.showCrosshairs', def: true, type: 'checkbox'},
@@ -831,12 +831,13 @@ const config = computed(() => {
                         },
                         xAxisLabels: {
                             ...c.chart.grid.labels.xAxisLabels,
-                            // values: monthValues.value,
-                            values: new Array(13).fill(0).map((d,i) => {
-                                return `Some long name\nwith a value ${i}`
-                            }),
+                            values: monthValues.value,
+                            // values: new Array(13).fill(0).map((d,i) => {
+                            //     return `Some long name\nwith a value ${i}`
+                            // }),
+                            rotation: -30,
                             datetimeFormatter: {
-                                enable: false,
+                                enable: true,
                                 locale: 'en',
                                 useUTC: false,
                                 januaryAsYear: true,

src/atoms/BaseDraggableDialog.vue

@@ -9,7 +9,8 @@ const props = defineProps({
     headerBg: { type: String },
     headerColor: { type: String },
     fullscreenParent: { type: HTMLElement },
-    isFullscreen: { type: Boolean, default: false }
+    isFullscreen: { type: Boolean, default: false },
+    withPadding: { type: Boolean, default: false }
 });
 
 const emit = defineEmits(["close"]);
@@ -219,7 +220,7 @@ onUnmounted(() => {
                     <BaseIcon name="close" :stroke="headerColor"/>
                 </button>
             </div>
-            <div class="modal-body">
+            <div :class="{ 'modal-body': !withPadding, 'modal-body-pad': withPadding}">
                 <slot />
             </div>
             <div class="resize-handle" @mousedown.stop.prevent="initResize" @touchstart.stop.prevent="initResize" />
@@ -274,6 +275,13 @@ onUnmounted(() => {
     transition: all 0.2s ease-in-out;
 }
 
+.modal-body-pad {
+    padding: 0 12px;
+    width: calc(100% - 24px);
+    height: 80%;
+    transition: all 0.2s ease-in-out;
+}
+
 .resize-handle {
     width: 20px;
     height: 20px;

src/components/vue-ui-ridgeline.vue

@@ -1065,6 +1065,7 @@ defineExpose({
             :headerColor="FINAL_CONFIG.style.chart.dialog.header.color"
             :isFullscreen="isFullscreen"
             :fullscreenParent="ridgelineChart"
+            withPadding
         >
             <template #title>
                 {{ selectedDatapoint.name }}