VueUiTableSparkline added component

Author: graphieros

README.md

@@ -14,7 +14,7 @@
 ![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
 ![NPM](https://img.shields.io/npm/l/vue-data-ui)
 ![npm](https://img.shields.io/npm/dt/vue-data-ui)
-![Static Badge](https://img.shields.io/badge/components-35-green)
+![Static Badge](https://img.shields.io/badge/components-36-green)
 
 [Interactive documentation](https://vue-data-ui.graphieros.com/)
 
@@ -56,6 +56,7 @@ Available components:
 - [VueUi3dBar](https://vue-data-ui.graphieros.com/docs#vue-ui-3d-bar)
 
 ## Tables
+- [VueUiTableSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-table-sparkline)
 - [VueUiTable](https://vue-data-ui.graphieros.com/docs#vue-ui-table)
 
 ## Rating

package-lock.json

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

package.json

@@ -47,6 +47,7 @@ import Bar3dTest from "./components/vue-ui-3d-bar.vue";
 import DigitsTest from "./components/vue-ui-digits.vue";
 import MoleculeTest from './components/vue-ui-molecule.vue';
 import DonutEvolutionTest from "./components/vue-ui-donut-evolution.vue";
+import TableSparklineTest from "./components/vue-ui-table-sparkline.vue";
 
 const dataset = ref([
   {
@@ -3791,6 +3792,21 @@ const moodRadarConfig = ref({
     }
   ])
 
+  const tableSparklineDataset = ref([
+    {
+      name: "Serie 1",
+      values: [1, 2, 3, 8, 13, 21]
+    },
+    {
+      name: "Serie 2",
+      values: [12, 1, 6, 7, 5, 12]
+    },
+    {
+      name: "Serie 3",
+      values: [18, 12, 21, 12, 6, 7]
+    },
+  ])
+
 </script>
 
 <template>
@@ -3891,6 +3907,24 @@ const moodRadarConfig = ref({
       </template>
       </Box>
 
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_table_sparkline)">
+        <template #title>
+          <BaseIcon name="chartTable"/>
+          VueUiTableSparkline
+        </template>
+        <template #info>
+        </template>
+        <template #dev>
+          <TableSparklineTest :dataset="tableSparklineDataset"/>
+        </template>
+        <template #prod>
+          <VueUiTableSparkline :dataset="tableSparklineDataset"/>
+        </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_table_sparkline }}
+        </template>
+      </Box>
+
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_molecule)">
         <template #title>
           <BaseIcon name="chartCluster"/>

src/App.vue

@@ -75,6 +75,7 @@ const icons = computed(() => {
         skeleton: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 14A1 1 0 003 18L7 18A1 1 0 007 14L3 14M3 8A1 1 0 003 12L7 12A1 1 0 007 8L3 8M3 2A1 1 0 003 6L4 6A1 1 0 004 2L3 2M12 10 12 16C12 17 13 18 14 18L17 18C18 18 19 17 19 16L19 10C19 9 18 8 17 8L14 8C13 8 12 9 12 10" stroke-dasharray="2" />`,
         smiley: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M5 12C8 14 12 14 15 12M5 7A1 1 0 008 7 1 1 0 005 7M12 7A1 1 0 0015 7 1 1 0 0012 7" />`,
         sort: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linecap="round" d="M1 15 5 18 9 15M5 5 5 18M15 15 15 2M11 5 15 2 19 5" />`,
+        sortReverse: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linecap="round" d="M 1 8 L 5 5 L 9 8 M 5 5 L 5 18 M 15 15 L 15 2 M 11 12 L 15 15 L 19 12" />`,
         spin: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 004 10 1 1 0 0016 10 1 1 0 007 10 1 1 0 0013 10 1 1 0 0010 10M1 10Q1 5 5 2" />`,
         star: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M3 19 10 15 17 19 14 12 19 8 13 8 10 2 7 8 1 8 6 12 3 19" />`,
         tableClose: `<path stroke-width="${props.strokeWidth}" stroke-linecap="round" fill="none" stroke="${props.stroke}" d="M4 1 4 1C2 1 1 2 1 4L1 16C1 18 2 19 4 19L7 19M4 1 16 1C18 1 19 2 19 4L19 14M18 19 14 16 10 19"/><line stroke-width="${props.strokeWidth}" stroke="${props.stroke}" x1="8" y1="1" x2="8" y2="19" stroke-linecap="round" /><line stroke-width="${props.strokeWidth}" stroke="${props.stroke}" x1="1" y1="8" x2="19" y2="8" />`,

src/atoms/BaseIcon.vue

@@ -21,6 +21,10 @@ const props = defineProps({
         default() {
             return []
         }
+    },
+    showInfo : {
+        type: Boolean,
+        default: true
     }
 });
 
@@ -39,15 +43,17 @@ const svg = ref({
     width: 500,
 });
 
+const emits = defineEmits(['hoverIndex'])
+
 const drawingArea = computed(() => {
     const topPadding = 12;
     return {
         top: topPadding,
         left: 0,
         right: svg.value.width,
         bottom: svg.value.height - 3,
-        start: sparklineConfig.value.style.dataLabel.position === 'left' ? 210 : 0,
-        width: 290,
+        start: props.showInfo && sparklineConfig.value.style.dataLabel.position === 'left' ? 210 : 0,
+        width: props.showInfo ? 290 : svg.value.width,
         height: svg.value.height - topPadding
     }
 });
@@ -110,8 +116,14 @@ const area = computed(() => {
 
 const selectedPlot = ref(undefined);
 
-function selectPlot(plot) {
+function selectPlot(plot, index) {
     selectedPlot.value = plot;
+    emits('hoverIndex', {index})
+}
+
+function unselectPlot() {
+    selectedPlot.value = undefined
+    emits('hoverIndex', {index:undefined})
 }
 
 const dataLabel = computed(() => {
@@ -135,7 +147,7 @@ const isBar = computed(() => {
 <template>
     <div class="vue-ui-sparkline" :id="uid" :style="`width:100%;font-family:${sparklineConfig.style.fontFamily}`">
         <!-- TITLE -->
-        <div v-if="sparklineConfig.style.title.show" class="vue-ui-sparkline-title" :style="`display:flex;align-items:center;width:100%;color:${sparklineConfig.style.title.color};background:${sparklineConfig.style.backgroundColor};justify-content:${sparklineConfig.style.title.textAlign === 'left' ? 'flex-start' : sparklineConfig.style.title.textAlign === 'right' ? 'flex-end' : 'center'};height:${sparklineConfig.style.title.fontSize * 2}px;font-size:${sparklineConfig.style.title.fontSize}px;font-weight:${sparklineConfig.style.title.bold ? 'bold' : 'normal'};`">
+        <div v-if="sparklineConfig.style.title.show && showInfo" class="vue-ui-sparkline-title" :style="`display:flex;align-items:center;width:100%;color:${sparklineConfig.style.title.color};background:${sparklineConfig.style.backgroundColor};justify-content:${sparklineConfig.style.title.textAlign === 'left' ? 'flex-start' : sparklineConfig.style.title.textAlign === 'right' ? 'flex-end' : 'center'};height:${sparklineConfig.style.title.fontSize * 2}px;font-size:${sparklineConfig.style.title.fontSize}px;font-weight:${sparklineConfig.style.title.bold ? 'bold' : 'normal'};`">
             <span data-cy="sparkline-period-label" :style="`padding:${sparklineConfig.style.title.textAlign === 'left' ? '0 0 0 12px' : sparklineConfig.style.title.textAlign === 'right' ? '0 12px 0 0' : '0'}`">
                 {{ selectedPlot ? selectedPlot.period : sparklineConfig.style.title.text }}
             </span>
@@ -247,6 +259,7 @@ const isBar = computed(() => {
 
             <!-- DATALABEL -->
             <text
+                v-if="showInfo"
                 data-cy="sparkline-datalabel"
                 :x="sparklineConfig.style.dataLabel.position === 'left' ? 12 : drawingArea.width + 12"
                 :y="svg.height / 2 + sparklineConfig.style.dataLabel.fontSize / 2.5"
@@ -266,8 +279,8 @@ const isBar = computed(() => {
                 :height="drawingArea.height + 6"
                 :width="(drawingArea.width / len)"
                 fill="transparent"
-                @mouseenter="selectPlot(plot)"
-                @mouseleave="selectedPlot = undefined"
+                @mouseenter="selectPlot(plot, i)"
+                @mouseleave="unselectPlot"
             />
             <slot name="svg" :svg="svg"/>
         </svg>