graphieros.npmx.social
[READ-ONLY] Mirror of https://github.com/graphieros/vue-data-ui. An open source user-empowering data visualization Vue 3 components library for eloquent data storytelling
vue-data-ui.graphieros.com/
charts
components-library
dashboard
data-storytelling
data-visualization
donut
gauge
heatmap
quadrant
radar
rating-stars
scatter
screenshot
skeleton-loader
sparkline
table
vue-data-ui
vue3
vuejs
vuejs3
feat(VueUiHistoryPlot): add temperatureIndependant color scaling
author
graphieros
date
(Jul 2, 2026, 5:18 PM +0200)
commit
7ee8349b
7ee8349b8c76045407e0073174e29da6efe1b79f
parent
0fc1249c
0fc1249ce47e7f093ffcd9e4b5d05da18aca6ab7
+26
-4
+4
-3
TestingArena/ArenaVueUiHistoryPlot.vue
+4
-3
TestingArena/ArenaVueUiHistoryPlot.vue
···
35
35
],
36
36
smooth: true,
37
37
temperatureColors: ['#FF0000', '#00FF00'],
38
-
temperatureAngle: 0,
38
+
temperatureAngle: 90,
39
39
usePlotTemperatureColors: true,
40
+
temperatureIndependant: true,
40
41
},
41
42
{
42
43
name: 'Series 2',
···
321
322
{{ datapoint }}
322
323
</template> -->
323
324
324
-
<template #chart-background>
325
+
<!-- <template #chart-background>
325
326
<div
326
327
style="
327
328
width: 100%;
···
333
334
);
334
335
"
335
336
/>
336
-
</template>
337
+
</template> -->
337
338
</LocalVueUiHistoryPlot>
338
339
</div>
339
340
</template>
+21
-1
src/components/vue-ui-history-plot.vue
+21
-1
src/components/vue-ui-history-plot.vue
···
619
619
palette[i % palette.length],
620
620
temperatureColors,
621
621
temperatureAngle: normalizeTemperatureAngle(ds.temperatureAngle),
622
+
temperatureIndependant: ds.temperatureIndependant === true,
622
623
usePlotTemperatureColors: ds.usePlotTemperatureColors !== false,
623
624
seriesIndex: i,
624
625
};
···
830
831
};
831
832
}
832
833
834
+
function getDrawingAreaBounds() {
835
+
const area = drawingArea.value;
836
+
837
+
return {
838
+
minX: area.left,
839
+
maxX: area.right,
840
+
minY: area.top,
841
+
maxY: area.bottom,
842
+
width: area.width,
843
+
height: area.height,
844
+
};
845
+
}
846
+
847
+
function getTemperatureBounds(ds) {
848
+
return ds?.temperatureIndependant
849
+
? getSeriesPlotBounds(ds)
850
+
: getDrawingAreaBounds();
851
+
}
852
+
833
853
function getTemperatureGradientCoordinates(ds) {
834
854
const angle = normalizeTemperatureAngle(ds?.temperatureAngle);
835
855
const radians = (angle * Math.PI) / 180;
836
856
const dx = Math.sin(radians);
837
857
const dy = Math.cos(radians);
838
-
const bounds = getSeriesPlotBounds(ds);
858
+
const bounds = getTemperatureBounds(ds);
839
859
const centerX = bounds.minX + bounds.width / 2;
840
860
const centerY = bounds.minY + bounds.height / 2;
841
861
const halfLength =