Skip to content

Commit 5ab8ad0

Browse files
graphierosgraphieros
committed
VueUiTableHeatmap added new component
1 parent 824fc6f commit 5ab8ad0

File tree

11 files changed

+508
-13
lines changed

11 files changed

+508
-13
lines changed

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
1414
![NPM](https://img.shields.io/npm/l/vue-data-ui)
1515
![npm](https://img.shields.io/npm/dt/vue-data-ui)
16-
![Static Badge](https://img.shields.io/badge/components-42-green)
16+
![Static Badge](https://img.shields.io/badge/components-43-green)
1717

1818
[Interactive documentation](https://vue-data-ui.graphieros.com/)
1919

@@ -62,8 +62,9 @@ Available components:
6262

6363
## Tables
6464

65-
- [VueUiTable](https://vue-data-ui.graphieros.com/docs#vue-ui-table)
65+
- [VueUiTableHeatmap](https://vue-data-ui.graphieros.com/docs#vue-ui-table-heatmap)
6666
- [VueUiTableSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-table-sparkline)
67+
- [VueUiTable](https://vue-data-ui.graphieros.com/docs#vue-ui-table)
6768

6869
## Rating
6970

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "2.0.91",
4+
"version": "2.0.92",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [
@@ -37,6 +37,7 @@
3737
"smiley",
3838
"sparkbar",
3939
"sparkline",
40+
"table heatmap",
4041
"table",
4142
"thermometer",
4243
"tiremarks",
@@ -84,6 +85,7 @@
8485
"sass": "^1.57.1",
8586
"vite": "^4.5.3",
8687
"vitest": "^0.34.1",
87-
"vue": "^3.3.4"
88+
"vue": "^3.3.4",
89+
"vue-data-ui": "file:../vue-data-ui"
8890
}
8991
}

‎src/App.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ import VueDataUi from "./components/vue-data-ui.vue";
5757
import VueUiKpiTest from "./components/vue-ui-kpi.vue";
5858
import GalaxyTest from "./components/vue-ui-galaxy.vue";
5959
import TreemapTest from "./components/vue-ui-treemap.vue";
60+
import TableHeatmapTest from "./components/vue-ui-table-heatmap.vue";
6061
6162
const dataset = ref([
6263
{
@@ -3222,6 +3223,17 @@ function selectBar(bar) {
32223223
console.log(bar)
32233224
}
32243225
3226+
const tableHeatmapDataset = ref([
3227+
{
3228+
name: "Serie 1",
3229+
values: [-100, "test", 0, 100, 150, 50, 25]
3230+
},
3231+
{
3232+
name: "Serie 2",
3233+
values: [20, 30, 50, 100, 44, "test"]
3234+
}
3235+
])
3236+
32253237
</script>
32263238

32273239
<template>
@@ -3362,6 +3374,89 @@ function selectBar(bar) {
33623374
</template>
33633375
</Box>
33643376

3377+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_table_heatmap)">
3378+
<template #title>
3379+
<!-- <BaseIcon name="chartTreemap"/> -->
3380+
VueUiTableHeatmap
3381+
</template>
3382+
<template #info>
3383+
<!-- <BaseIcon name="chartTable" stroke="#5f8bee"/>
3384+
<BaseIcon name="pdf" stroke="#5f8bee"/>
3385+
<BaseIcon name="image" stroke="#5f8bee"/>
3386+
<BaseIcon name="excel" stroke="#5f8bee"/>
3387+
<BaseIcon name="fullscreen" stroke="#5f8bee"/> -->
3388+
</template>
3389+
<template #dev>
3390+
<TableHeatmapTest :dataset="tableHeatmapDataset">
3391+
<template #caption>
3392+
<div style="width: 100%; background: red">
3393+
TITLE
3394+
</div>
3395+
</template>
3396+
3397+
<template #head="{ value, rowIndex, type}">
3398+
{{ value }}
3399+
</template>
3400+
3401+
<template #rowTitle="{ value, rowIndex, colIndex, type, isResponsive }">
3402+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-end; padding: 0 6px;font-weight:${isResponsive ? 'bold' : 'normal'}`">
3403+
{{ value }}
3404+
</div>
3405+
</template>
3406+
<template #cell="{ value, rowIndex, colIndex, type, color, textColor }">
3407+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-end; padding: 0 6px;background:${color};color:${textColor}`">
3408+
{{ value }}
3409+
</div>
3410+
</template>
3411+
<template #sum="{ value }">
3412+
{{ value }}
3413+
</template>
3414+
<template #average="{ value }">
3415+
{{ value }}
3416+
</template>
3417+
<template #median="{ value }">
3418+
{{ value }}
3419+
</template>
3420+
</TableHeatmapTest>
3421+
</template>
3422+
<template #prod>
3423+
<VueDataUi component="VueUiTableHeatmap" :dataset="tableHeatmapDataset">
3424+
<template #caption>
3425+
<div style="width: 100%; background: red">
3426+
TITLE
3427+
</div>
3428+
</template>
3429+
3430+
<template #head="{ value, rowIndex, type}">
3431+
{{ value }}
3432+
</template>
3433+
3434+
<template #rowTitle="{ value, rowIndex, colIndex, type, isResponsive }">
3435+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-end; padding: 0 6px;font-weight:${isResponsive ? 'bold' : 'normal'}`">
3436+
{{ value }}
3437+
</div>
3438+
</template>
3439+
<template #cell="{ value, rowIndex, colIndex, type, color, textColor }">
3440+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-end; padding: 0 6px;background:${color};color:${textColor}`">
3441+
{{ value }}
3442+
</div>
3443+
</template>
3444+
<template #sum="{ value }">
3445+
{{ value }}
3446+
</template>
3447+
<template #average="{ value }">
3448+
{{ value }}
3449+
</template>
3450+
<template #median="{ value }">
3451+
{{ value }}
3452+
</template>
3453+
</VueDataUi>
3454+
</template>
3455+
<template #config>
3456+
{{ PROD_CONFIG.vue_ui_table_heatmap }}
3457+
</template>
3458+
</Box>
3459+
33653460
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_treemap)">
33663461
<template #title>
33673462
<BaseIcon name="chartTreemap"/>

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

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import VueUiVerticalBar from "./vue-ui-vertical-bar.vue";
4343
import VueUiWaffle from "./vue-ui-waffle.vue";
4444
import VueUiWheel from "./vue-ui-wheel.vue";
4545
import VueUiXy from "./vue-ui-xy.vue";
46+
import VueUiTableHeatmap from "./vue-ui-table-heatmap.vue";
4647
4748
const props = defineProps({
4849
component: { type: String },
@@ -51,7 +52,7 @@ const props = defineProps({
5152
})
5253
5354
const isError = computed(() => {
54-
return !["VueUi3dBar", "VueUiAgePyramid", "VueUiAnnotator", "VueUiCandlestick", "VueUiChestnut", "VueUiDashboard", "VueUiDigits", "VueUiDonutEvolution", "VueUiDonut", "VueUiGauge", "VueUiGalaxy", "VueUiHeatmap", "VueUiKpi", "VueUiMiniLoader", "VueUiMolecule", "VueUiMoodRadar", "VueUiNestedDonuts", "VueUiOnion", "VueUiQuadrant", "VueUiRadar", "VueUiRating", "VueUiRelationCircle", "VueUiRings", "VueUiScatter", "VueUiScreenshot", "VueUiSkeleton", "VueUiSmiley", "VueUiSparkbar", "VueUiSparkgauge", "VueUiSparkHistogram", "VueUiSparkline", "VueUiSparkStackbar", "VueUiTableSparkline", "VueUiTable", "VueUiThermometer", "VueUiTiremarks", "VueUiVerticalBar", "VueUiWaffle", "VueUiWheel", "VueUiXy", "VueUiTreemap"].includes(props.component)
55+
return !["VueUi3dBar", "VueUiAgePyramid", "VueUiAnnotator", "VueUiCandlestick", "VueUiChestnut", "VueUiDashboard", "VueUiDigits", "VueUiDonutEvolution", "VueUiDonut", "VueUiGauge", "VueUiGalaxy", "VueUiHeatmap", "VueUiKpi", "VueUiMiniLoader", "VueUiMolecule", "VueUiMoodRadar", "VueUiNestedDonuts", "VueUiOnion", "VueUiQuadrant", "VueUiRadar", "VueUiRating", "VueUiRelationCircle", "VueUiRings", "VueUiScatter", "VueUiScreenshot", "VueUiSkeleton", "VueUiSmiley", "VueUiSparkbar", "VueUiSparkgauge", "VueUiSparkHistogram", "VueUiSparkline", "VueUiSparkStackbar", "VueUiTableSparkline", "VueUiTable", "VueUiThermometer", "VueUiTiremarks", "VueUiVerticalBar", "VueUiWaffle", "VueUiWheel", "VueUiXy", "VueUiTreemap", "VueUiTableHeatmap"].includes(props.component)
5556
});
5657
5758
const vue_ui_3d_bar = ref(null);
@@ -95,6 +96,7 @@ const vue_ui_vertical_bar = ref(null);
9596
const vue_ui_waffle = ref(null);
9697
const vue_ui_wheel = ref(null);
9798
const vue_ui_xy = ref(null);
99+
const vue_ui_table_heatmap = ref(null);
98100
99101
const emit = defineEmits([
100102
'selectLegend',
@@ -126,12 +128,18 @@ const recalculateHeight = ref(() => null);
126128
127129
onMounted(() => {
128130
if (isError.value) {
129-
throw new Error(`\n\nVue Data UI exception:\nThe provided component "${props.component}" does not exist. Check the spelling.\n\nAvailable components:\n\n. VueUi3dBar\n. VueUiAgePyramid\n. VueUiAnnotator\n. VueUiCandlestick\n. VueUiChestnut\n. VueUiDashboard\n. VueUiDigits\n. VueUiDonutEvolution\n. VueUiDonut\n. VueUiGauge\n. VueUiHeatmap\n. VueUiMiniLoadar\n. VueUiKpi\n. VueUiMolecule\n. VueUiMoodRadar\n. VueUiNestedDonuts\n. VueUiOnion\n. VueUiQuadrant\n. VueUiRadar\n. VueUiRating\n. VueUiRelationCircle\n. VueUiRings\n. VueUiScatter\n. VueUiScreenshot\n. VueUiSkeleton\n. VueUiSmiley\n. VueUiSparkbar\n. VueUiSparkgauge\n. VueUiSparkHistogram\n. VueUiSparkline\n. VueUiSparkStackbar\n. VueUiTableSparkline\n. VueUiTable\n. VueUiThermometer\n. VueUiTiremarks\n. VueUiVerticalBar\n. VueUiWaffle\n. VueUiWheel\n. VueUiXy\n\n`)
131+
throw new Error(`\n\nVue Data UI exception:\nThe provided component "${props.component}" does not exist. Check the spelling.\n\nAvailable components:\n\n. VueUi3dBar\n. VueUiAgePyramid\n. VueUiAnnotator\n. VueUiCandlestick\n. VueUiChestnut\n. VueUiDashboard\n. VueUiDigits\n. VueUiDonutEvolution\n. VueUiDonut\n. VueUiGauge\n. VueUiHeatmap\n. VueUiMiniLoadar\n. VueUiKpi\n. VueUiMolecule\n. VueUiMoodRadar\n. VueUiNestedDonuts\n. VueUiOnion\n. VueUiQuadrant\n. VueUiRadar\n. VueUiRating\n. VueUiRelationCircle\n. VueUiRings\n. VueUiScatter\n. VueUiScreenshot\n. VueUiSkeleton\n. VueUiSmiley\n. VueUiSparkbar\n. VueUiSparkgauge\n. VueUiSparkHistogram\n. VueUiSparkline\n. VueUiSparkStackbar\n. VueUiTableHeatmap\n. VueUiTableSparkline\n. VueUiTable\n. VueUiThermometer\n. VueUiTiremarks\n. VueUiVerticalBar\n. VueUiWaffle\n. VueUiWheel\n. VueUiXy\n\n`)
132+
}
133+
134+
if(vue_ui_table_heatmap.value) {
135+
generatePdf.value = vue_ui_table_heatmap.value.generatePdf;
136+
generateCsv.value = vue_ui_table_heatmap.value.generateCsv;
137+
generateImage.value = vue_ui_table_heatmap.value.generateImage;
130138
}
131139
132140
if(vue_ui_3d_bar.value) {
133141
generatePdf.value = vue_ui_3d_bar.value.generatePdf;
134-
generateImage.value = vue_ui_3d_bar.generateImage;
142+
generateImage.value = vue_ui_3d_bar.value.generateImage;
135143
}
136144
137145
if(vue_ui_age_pyramid.value) {
@@ -341,6 +349,35 @@ defineExpose({
341349
The provided component "{{ component }}" does not exist
342350
</div>
343351

352+
<VueUiTableHeatmap
353+
v-if="component === 'VueUiTableHeatmap'"
354+
ref="vue_ui_table_heatmap"
355+
:config="config"
356+
:dataset="dataset"
357+
>
358+
<template #caption>
359+
<slot name="caption"/>
360+
</template>
361+
<template #head="{ value, rowIndex, type }">
362+
<slot name="head" v-bind="{ value, rowIndex, type }"/>
363+
</template>
364+
<template #rowTitle="{ value, rowIndex, colIndex, type, isResponsive }">
365+
<slot name="rowTitle" v-bind="{ value, rowIndex, colIndex, type, isResponsive }"/>
366+
</template>
367+
<template #cell="{ value, rowIndex, colIndex, type, color, textColor, isResponsive }">
368+
<slot name="cell" v-bind="{ value, rowIndex, colIndex, type, color, textColor, isResponsive }"/>
369+
</template>
370+
<template #sum="{ value, rowIndex, isResponsive }">
371+
<slot name="sum" v-bind="{ value, rowIndex, isResponsive }"/>
372+
</template>
373+
<template #average="{ value, rowIndex, isResponsive }">
374+
<slot name="average" v-bind="{ value, rowIndex, isResponsive }"/>
375+
</template>
376+
<template #median="{ value, rowIndex, isResponsive }">
377+
<slot name="median" v-bind="{ value, rowIndex, isResponsive }"/>
378+
</template>
379+
</VueUiTableHeatmap>
380+
344381
<VueUi3dBar
345382
v-if="component === 'VueUi3dBar'"
346383
:config="config"

0 commit comments

Comments
 (0)