Skip to content

Commit 8c5c9fa

Browse files
graphierosgraphieros
committed
Improvement - VueUiRidgeline - Allow individual datapoint colors
1 parent c84546a commit 8c5c9fa

File tree

5 files changed

+45
-5
lines changed

5 files changed

+45
-5
lines changed

‎TestingArena/ArenaVueUiRidgeline.vue‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,27 @@ function makeDataset(n) {
4747
return arr;
4848
}
4949
50-
const dataset = ref(makeDataset(5));
50+
// const dataset = ref(makeDataset(5));
51+
52+
const dataset = ref([
53+
{ name: 'Moscow', datapoints: [{ color: '#ff3700', name: 'Average Monthly Temperature (°C)', values: [-7, -6, 0, 8, 15, 18, 20, 18, 13, 7, 1, -4] }] }, // Mean ≈ 7°C
54+
{ name: 'Chicago', datapoints: [{ color: '#6376DD', name: 'Average Monthly Temperature (°C)', values: [-4, -2, 3, 10, 16, 22, 24, 23, 19, 12, 5, -1] }] }, // Mean ≈ 10°C
55+
{ name: 'Toronto', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [-3, -2, 2, 9, 15, 20, 22, 21, 17, 10, 4, -1] }] }, // Mean ≈ 9°C
56+
{ name: 'Berlin', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [0, 2, 6, 12, 16, 19, 21, 21, 17, 12, 7, 3] }] }, // Mean ≈ 12°C
57+
{ name: 'Beijing', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [-3, 0, 6, 14, 20, 24, 26, 25, 20, 13, 5, -1] }] }, // Mean ≈ 12°C
58+
{ name: 'London', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [5, 6, 8, 11, 15, 18, 20, 20, 17, 13, 9, 6] }] }, // Mean ≈ 13°C
59+
{ name: 'Paris', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [5, 6, 9, 12, 16, 19, 21, 21, 18, 13, 8, 5] }] }, // Mean ≈ 13°C
60+
{ name: 'San Francisco', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [11, 12, 13, 13, 14, 15, 15, 16, 17, 16, 14, 12] }] }, // Mean ≈ 14°C
61+
{ name: 'New York', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [0, 2, 7, 13, 18, 24, 27, 26, 22, 15, 9, 3] }] }, // Mean ≈ 13°C
62+
{ name: 'Milan', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [3, 5, 9, 14, 18, 22, 24, 24, 20, 15, 8, 4] }] }, // Mean ≈ 13°C
63+
{ name: 'Madrid', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [6, 8, 11, 13, 17, 22, 26, 25, 21, 15, 10, 7] }] }, // Mean ≈ 15°C
64+
{ name: 'Rome', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [8, 9, 11, 14, 18, 22, 25, 25, 22, 17, 12, 9] }] }, // Mean ≈ 16°C
65+
{ name: 'Seoul', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [-2, 0, 5, 12, 17, 21, 25, 26, 21, 15, 7, 1] }] }, // Mean ≈ 13°C
66+
{ name: 'Tokyo', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [5, 6, 9, 15, 19, 22, 26, 27, 24, 18, 13, 8] }] }, // Mean ≈ 16°C
67+
{ name: 'Los Angeles', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [14, 15, 15, 17, 18, 20, 22, 22, 22, 19, 16, 13] }] }, // Mean ≈ 18°C
68+
{ name: 'Istanbul', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [6, 6, 8, 12, 16, 21, 23, 23, 20, 16, 12, 8] }] }, // Mean ≈ 14°C
69+
{ name: 'Mexico City', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [13, 14, 15, 16, 16, 16, 15, 15, 15, 14, 13, 13] }] }, // Mean ≈ 15°C
70+
]);
5171
5272
const model = ref([
5373
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
@@ -80,6 +100,7 @@ const model = ref([
80100
{ key: 'style.chart.areas.stroke.color', def: '#FFFFFF', type: 'color'},
81101
{ key: 'style.chart.areas.smooth', def: true, type: 'checkbox'},
82102
{ key: 'style.chart.areas.opacity', def: 0.9, min: 0.1, max: 1, step: 0.01, type: 'number'},
103+
{ key: 'style.chart.areas.useCommonColor', def: false, type: 'checkbox'},
83104
84105
{ key: 'style.chart.areas.maxPoint.show', def: true, type: 'checkbox'},
85106
{ key: 'style.chart.areas.maxPoint.adaptStrokeToBackground', def: true, type: 'checkbox'},

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,4 +110,4 @@
110110
"vitest": "^3.1.1",
111111
"vue": "^3.5.14"
112112
}
113-
}
113+
}

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

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,7 @@ const formattedDataset = computed(() => {
254254
uid: createUid(),
255255
datapoints: ds.datapoints.map((dp, j) => {
256256
const color = dp.color ? convertColorToHex(dp.color) : customPalette.value[j] || palette[j] || palette[j % palette.length];
257+
console.log(color);
257258
const id = slugify(dp.name);
258259
return {
259260
...dp,
@@ -390,6 +391,7 @@ const drawableDataset = computed(() => {
390391
391392
return {
392393
...dp,
394+
uid: createUid(),
393395
plots,
394396
smoothPath,
395397
straightPath,
@@ -730,17 +732,32 @@ defineExpose({
730732
<stop offset="70%" :stop-color="dp.color" stop-opacity="0.3" />
731733
<stop offset="100%" :stop-color="dp.color" stop-opacity="0.1" />
732734
</linearGradient>
735+
736+
<template v-for="(ds, i) in drawableDataset">
737+
<linearGradient
738+
v-for="(dp, j) in ds.datapoints"
739+
:key="`grad${dp.id}`"
740+
:id="`gradient-single-${uid}-${dp.uid}`"
741+
x1="50%" y1="0%" x2="50%"
742+
y2="100%">
743+
<stop offset="0%" :stop-color="dp.color" stop-opacity="1" />
744+
<stop offset="30%" :stop-color="dp.color" stop-opacity="0.7" />
745+
<stop offset="70%" :stop-color="dp.color" stop-opacity="0.3" />
746+
<stop offset="100%" :stop-color="dp.color" stop-opacity="0.1" />
747+
</linearGradient>
748+
</template>
733749
</defs>
734750

751+
735752
<g v-if="$slots.pattern">
736753
<defs v-for="(variable, i) in legendSet">
737754
<slot name="pattern" v-bind="{variable, patternId: `pattern_${uid}_${i}`}"/>
738755
</defs>
739756
</g>
740757

741-
<g v-for="(ds, i) in drawableDataset">
758+
<g v-for="(ds, i) in drawableDataset" :key="`ds-${i}`">
742759
<!-- Paths -->
743-
<g v-for="(dp, j) in ds.datapoints">
760+
<g v-for="(dp, j) in ds.datapoints" :key="dp.id">
744761
<!-- PATH BACKGROUND -->
745762
<path
746763
:fill="FINAL_CONFIG.style.chart.backgroundColor"
@@ -752,7 +769,7 @@ defineExpose({
752769

753770
<!-- PATH -->
754771
<path
755-
:fill="`url(#gradient-${dp.id}-${uid})`"
772+
:fill="FINAL_CONFIG.style.chart.areas.useCommonColor ? `url(#gradient-${dp.id}-${uid})` : `url(#gradient-single-${uid}-${dp.uid})`"
756773
:stroke="FINAL_CONFIG.style.chart.areas.stroke.useSerieColor ? dp.color : FINAL_CONFIG.style.chart.areas.stroke.color"
757774
:stroke-width="FINAL_CONFIG.style.chart.areas.strokeWidth"
758775
:d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath"

‎src/useConfig.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5437,6 +5437,7 @@ export function useConfig() {
54375437
},
54385438
smooth: true, // Also applied in dialog chart
54395439
opacity: 0.9,
5440+
useCommonColor: false,
54405441
maxPoint: {
54415442
show: true,
54425443
adaptStrokeToBackground: true,

‎types/vue-data-ui.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6841,6 +6841,7 @@ declare module "vue-data-ui" {
68416841
height?: number;
68426842
rowHeight?: number;
68436843
strokeWidth?: number;
6844+
useCommonColor?: boolean;
68446845
stroke?: {
68456846
useSerieColor?: boolean;
68466847
color?: string;

0 commit comments

Comments
 (0)