Improvement - VueUiRidgeline - Add config option to disable gradients; improve pattern slots

Author: graphieros

TestingArena/ArenaVueUiRidgeline.vue

@@ -101,6 +101,7 @@ const model = ref([
     { key: 'style.chart.areas.smooth', def: true, type: 'checkbox'},
     { key: 'style.chart.areas.opacity', def: 0.9, min: 0.1, max: 1, step: 0.01, type: 'number'},
     { key: 'style.chart.areas.useCommonColor', def: false, type: 'checkbox'},
+    { key: 'style.chart.areas.useGradient', def: true, type: 'checkbox'},
     
     { key: 'style.chart.areas.maxPoint.show', def: true, type: 'checkbox'},
     { key: 'style.chart.areas.maxPoint.adaptStrokeToBackground', def: true, type: 'checkbox'},
@@ -189,7 +190,16 @@ const config = computed(() => {
         <template #title>VueUiRidgeline</template>
 
         <template #local>
-            <LocalVueUiRidgeLine :dataset="dataset" :config="config"/>
+            <LocalVueUiRidgeLine :dataset="dataset" :config="config">
+                <!-- <template #pattern="{ seriesIndex, patternId }">
+                    <pattern v-if="seriesIndex === 0" :id="patternId" width="70" height="8" patternTransform="scale(2)"
+                    patternUnits="userSpaceOnUse" opacity="0.5">
+                    <rect width="100%" height="100%" fill="#FFFFFF20" />
+                    <path fill="none" stroke="#ecc94b"
+                        d="M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2s14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6S49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14S20.785-8.742 16.3-3.661C11.918 1.306 8.353 6-.02 6.002" />
+                </pattern>
+                </template> -->
+            </LocalVueUiRidgeLine>
         </template>
 
         <template #VDUI-local>

package.json

@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}

src/components/vue-ui-ridgeline.vue

@@ -715,25 +715,23 @@ defineExpose({
                 </template>
             </defs>
 
-
-            <g v-if="$slots.pattern">
-                <defs v-for="(variable, i) in legendSet">
-                    <slot name="pattern" v-bind="{ variable, patternId: `pattern_${uid}_${i}` }" />
-                </defs>
-            </g>
-
             <g v-for="(ds, i) in drawableDataset" :key="`ds-${i}`">
                 <!-- Paths -->
                 <g v-for="(dp, j) in ds.datapoints" :key="dp.id">
+                    <g v-if="$slots.pattern">
+                        <defs>
+                            <slot name="pattern" v-bind="{ datapointIndex: i, seriesIndex: j, patternId: `pattern_${uid}_${dp.uid}` }" />
+                        </defs>
+                    </g>
                     <!-- PATH BACKGROUND -->
-                    <path :fill="FINAL_CONFIG.style.chart.backgroundColor" stroke="none" stroke-linecap="round"
+                    <path :fill="$slots.pattern ? `url(#pattern_${uid}_${dp.uid})` : FINAL_CONFIG.style.chart.backgroundColor" stroke="none" stroke-linecap="round"
                         :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath" :style="{
                             opacity: FINAL_CONFIG.style.chart.areas.opacity,
                         }" />
 
                     <!-- PATH -->
                     <path
-                        :fill="FINAL_CONFIG.style.chart.areas.useCommonColor ? `url(#gradient-${dp.id}-${uid})` : `url(#gradient-single-${uid}-${dp.uid})`"
+                        :fill="!FINAL_CONFIG.style.chart.areas.useGradient ? dp.color : FINAL_CONFIG.style.chart.areas.useCommonColor ? `url(#gradient-${dp.id}-${uid})` : `url(#gradient-single-${uid}-${dp.uid})`"
                         :stroke="FINAL_CONFIG.style.chart.areas.stroke.useSerieColor ? dp.color : FINAL_CONFIG.style.chart.areas.stroke.color"
                         :stroke-width="FINAL_CONFIG.style.chart.areas.strokeWidth"
                         :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath"

src/useConfig.js

@@ -5439,6 +5439,7 @@ export function useConfig() {
                     smooth: true, // Also applied in dialog chart
                     opacity: 0.9,
                     useCommonColor: false,
+                    useGradient: true,
                     maxPoint: {
                         show: true,
                         adaptStrokeToBackground: true,

types/vue-data-ui.d.ts

@@ -6843,6 +6843,7 @@ declare module "vue-data-ui" {
                     rowHeight?: number;
                     strokeWidth?: number;
                     useCommonColor?: boolean;
+                    useGradient?: boolean;
                     stroke?: {
                         useSerieColor?: boolean;
                         color?: string;