Skip to content

Commit 1fed331

Browse files
graphierosgraphieros
committed
Improvement - VueUiHeatmap - Add selectDatapoint emit
1 parent 368d3d7 commit 1fed331

File tree

6 files changed

+17
-8
lines changed

6 files changed

+17
-8
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -437,7 +437,7 @@ From the dataset you pass into the props, this component will produce the most a
437437
| `VueUiFunnel` | `VueUiFunnelDatasetItem[]` | `VueUiFunnelConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
438438
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
439439
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
440-
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
440+
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `@selectDatapoint`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
441441
| `VueUiHistoryPlot` | `VueUiHistoryPlotDatasetItem[]` | `VueUiHistoryPlotConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
442442
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `@selectNode`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#node`, `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
443443
| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |

‎TestingArena/ArenaVueUiHeatmap.vue‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,9 @@ const config = computed(() => {
236236
237237
const step = ref(0)
238238
239+
function logCell(cell) {
240+
console.log(cell)
241+
}
239242
240243
</script>
241244

@@ -258,7 +261,7 @@ const step = ref(0)
258261
<template #title>VueUiHeatmap</template>
259262

260263
<template #local>
261-
<LocalVueUiHeatmap :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`local_${step}`" ref="local">
264+
<LocalVueUiHeatmap :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`local_${step}`" ref="local" @selectDatapoint="logCell">
262265
<!-- <template #chart-background>
263266
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
264267
</template> -->
@@ -296,7 +299,7 @@ const step = ref(0)
296299
</template>
297300

298301
<template #VDUI-local>
299-
<LocalVueDataUi component="VueUiHeatmap" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-lodal_${step}`" ref="vduiLocal">
302+
<LocalVueDataUi component="VueUiHeatmap" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-lodal_${step}`" ref="vduiLocal" @selectDatapoint="logCell">
300303
<template #svg="{ svg }">
301304
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
302305
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
@@ -317,7 +320,7 @@ const step = ref(0)
317320
</template>
318321

319322
<template #build>
320-
<VueUiHeatmap :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`build_${step}`" ref="build">
323+
<VueUiHeatmap :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`build_${step}`" ref="build" @selectDatapoint="logCell">
321324
<template #svg="{ svg }">
322325
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
323326
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
@@ -338,7 +341,7 @@ const step = ref(0)
338341
</template>
339342

340343
<template #VDUI-build>
341-
<VueDataUi component="VueUiHeatmap" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-build_${step}`" ref="vduiBuild">
344+
<VueDataUi component="VueUiHeatmap" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-build_${step}`" ref="vduiBuild" @selectDatapoint="logCell">
342345
<template #svg="{ svg }">
343346
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
344347
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>

‎documentation/installation.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ From the dataset you pass into the props, this component will produce the most a
155155
| `VueUiFunnel` | `VueUiFunnelDatasetItem[]` | `VueUiFunnelConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
156156
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
157157
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
158-
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
158+
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `@selectDatapoint`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
159159
| `VueUiHistoryPlot` | `VueUiHistoryPlotDatasetItem[]` | `VueUiHistoryPlotConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
160160
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `@selectNode`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#node`, `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
161161
| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |

‎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/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ const components = ref([ //------|
125125
* Modify the index to display a component
126126
* [0] = VueUiXy
127127
*/
128-
const selectedComponent = ref(components.value[1]);
128+
const selectedComponent = ref(components.value[12]);
129129
130130
/**
131131
* Legacy testing arena where some non chart components can be tested

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ const props = defineProps({
4949
}
5050
});
5151
52+
const emit = defineEmits(['selectDatapoint']);
53+
5254
const isDataset = computed(() => {
5355
return !!props.dataset && props.dataset.length;
5456
})
@@ -445,6 +447,9 @@ function toggleAnnotator() {
445447
isAnnotator.value = !isAnnotator.value;
446448
}
447449
450+
function selectDatapoint(cell) {
451+
emit('selectDatapoint', cell);
452+
}
448453
449454
defineExpose({
450455
generatePdf,
@@ -656,6 +661,7 @@ defineExpose({
656661
stroke="none"
657662
@mouseover="useTooltip(cell, i, drawingArea.left + cellSize.width * j, drawingArea.top + cellSize.height * i)"
658663
@mouseout="isTooltip = false; hoveredCell = undefined; hoveredValue = null; selectedClone = null"
664+
@click="() => selectDatapoint(cell)"
659665
/>
660666
</g>
661667
<g v-if="FINAL_CONFIG.style.layout.dataLabels.yAxis.show">

0 commit comments

Comments
 (0)