VueUiXy show any xLabel on hover when showOnlyFirstAndLast is true

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.87",
+  "version": "1.9.88",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -3907,7 +3907,7 @@ const moodRadarConfig = ref({
       </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_table_sparkline)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_table_sparkline)">
         <template #title>
           <BaseIcon name="chartTable"/>
           VueUiTableSparkline
@@ -4280,7 +4280,7 @@ const moodRadarConfig = ref({
         </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_xy)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_xy)">
         <template #title>
           <BaseIcon name="chartLine" />
           VueUiXy

src/App.vue

@@ -558,7 +558,7 @@
                     <g v-for="(label, i) in timeLabels" :key="`time_label_${i}`">
                         <text
                             :data-cy="`xy-time-label-${i}`"
-                            v-if="(label && !chartConfig.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast) || (label && chartConfig.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && (i === 0 || i === timeLabels.length -1))"
+                            v-if="(label && !chartConfig.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast) || (label && chartConfig.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && (i === 0 || i === timeLabels.length -1)) || (label && chartConfig.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && selectedSerieIndex === i)"
                             text-anchor="middle"
                             :y="drawingArea.bottom + chartConfig.chart.grid.labels.xAxisLabels.fontSize * 1.3"
                             :x="drawingArea.left + (drawingArea.width / maxSeries) * i + (drawingArea.width / maxSeries / 2)"

src/components/vue-ui-xy.vue

@@ -19,6 +19,7 @@ import {
     createStar,
     degreesToRadians,
     hslToRgb,
+    interpolateColorHex,
     isSafeValue,
     isValidUserValue,
     makeDonut,
@@ -667,4 +668,20 @@ describe('niceNum', () => {
         expect(niceNum(1118, false)).toBe(2000)
         expect(niceNum(1118, 1)).toBe(1000)
     })
+})
+
+describe('interpolateColorHex', () => {
+    test('returns a color between two hex colors at a given range', () => {
+        expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 0)).toBe('#0000ff')
+        expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 10)).toBe('#1a00e6')
+        expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 20)).toBe('#3300cc')
+        expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 30)).toBe('#4d00b3')
+        expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 40)).toBe('#660099')
+        expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 50)).toBe('#800080')
+        expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 60)).toBe('#990066')
+        expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 70)).toBe('#b3004d')
+        expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 80)).toBe('#cc0033')
+        expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 90)).toBe('#e6001a')
+        expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 100)).toBe('#ff0000')
+    })
 })