VueUiSparkTrend added new component

Author: graphieros

README.md

@@ -13,7 +13,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-46-green)
+![Static Badge](https://img.shields.io/badge/components-47-green)
 
 [Interactive documentation](https://vue-data-ui.graphieros.com/)
 
@@ -56,6 +56,7 @@ Available components:
 - [VueUiSparkgauge](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkgauge)
 - [VueUiSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkline)
 - [VueUiSparkstackbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkstackbar)
+- [VueUiSparkTrend](https://vue-data-ui.graphieros.com/docs#vue-ui-spark-trend)
 
 ## 3d
 

package-lock.json

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

package.json

@@ -61,6 +61,7 @@ import TableHeatmapTest from "./components/vue-ui-table-heatmap.vue";
 import AccordionTest from "./components/vue-ui-accordion.vue";
 import QuickTest from "./components/vue-ui-quick-chart.vue";
 import TestCursor from "./components/vue-ui-cursor.vue";
+import TestTrend from "./components/vue-ui-spark-trend.vue";
 
 const dataset = ref([
   {
@@ -3301,7 +3302,7 @@ const quickDatasetLine = ref([
   },
   {
     name: 'Serie2',
-    values: [5, 6, 7, 6, 7, 8, 7, 8, 9]
+    values: [5, 6, 7, 6, -10, 8, 7, 8, 9]
   },
   {
     name: 'Serie3',
@@ -3310,7 +3311,7 @@ const quickDatasetLine = ref([
 ])
 
 
-const quickDatasetSimpleLine = ref([1, 2, 3, 5, 8, 13, 21, 34, 55, 89])
+const quickDatasetSimpleLine = ref([1, 2, 3, 5, -8, 13, 21, 34, 55, 89])
 const quickDatasetSimpleBar = ref([1, 2, -10, -5, 8])
 
 const quickDatasetBar = ref([
@@ -3336,8 +3337,28 @@ const quickConfig = ref({
   yAxisLabel: 'This is y axis'
 })
 
-const cursorConfig = ref({
-  
+const cursorConfig = ref({})
+
+const pillDataset = ref([0, 1, 2, 3, 5, 8, -13, 21, 34, 55, 89])
+
+const pillConfig = ref({
+  style: {
+    trendLabel: {
+      trendType: "global"
+    },
+    area: {
+      opacity: 20
+    },
+    line: {
+      useColorTrend: true
+    },
+    trendLabel: {
+      useColorTrend: true
+    },
+    dataLabel: {
+      useColorTrend: true,
+    }
+  }
 })
 
 </script>
@@ -3479,10 +3500,29 @@ const cursorConfig = ref({
           <BaseIcon name="people" stroke="#42d392" />
           <BaseIcon name="copy" stroke="#42d392" />
           <BaseIcon name="cursor" stroke="#42d392" />
+          <BaseIcon name="trend" stroke="#42d392" />
         </div>
       </template>
       </Box>
 
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_spark_trend)">
+        <template #title>
+          <BaseIcon name="trend"/>
+          VueUiSparkTrend
+        </template>
+        <template #info>
+        </template>
+        <template #dev>
+          <TestTrend :dataset="pillDataset" :config="pillConfig"/>
+        </template>
+        <template #prod>
+          <VueUiSparkTrend :dataset="pillDataset" :config="pillConfig"/>
+        </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_spark_trend }}
+        </template>
+      </Box>
+
       <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_quick_chart)">
         <template #title>
           <BaseIcon name="vueDataUi"/>

src/App.vue

@@ -1,4 +1,4 @@
-<script setup>
+‹<script setup>
 import { computed } from "vue";
 import { XMLNS } from "../lib";
 
@@ -140,7 +140,8 @@ const icons = computed(() => {
         people: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth / 2}" fill="none" d="M 5 1 A 1 1 0 0 0 5 9 A 1 1 0 0 0 5 1 M 15 1 A 1 1 0 0 0 15 9 A 1 1 0 0 0 15 1 M 5 11 A 1 1 0 0 0 5 19 A 1 1 0 0 0 5 11 M 15 11 A 1 1 0 0 0 15 19 A 1 1 0 0 0 15 11 M 3 4 L 3 4 M 7 4 L 7 4 M 3 6 C 4 7 6 7 7 6 M 13 4 L 13 4 M 17 4 L 17 4 M 13 6 C 14 7 16 7 17 6 M 3 14 L 3 14 M 7 14 L 7 14 M 3 16 C 4 17 6 17 7 16 M 13 14 L 13 14 M 17 14 L 17 14 M 13 16 C 14 17 16 17 17 16" stroke-linecap="round" stroke-linejoin="round"/>`,
         copy: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" d="M 18 16 C 18 17 17 18 16 18 L 8 18 C 7 18 6 17 6 16 L 6 8 C 6 7 7 6 8 6 L 16 6 C 17 6 18 7 18 8 L 18 16 M 6 14 L 4 14 C 3 14 2 13 2 12 L 2 4 C 2 3 3 2 4 2 L 12 2 C 13 2 14 3 14 4 L 14 6" stroke-linecap="round" stroke-linejoin="round"/>`,
         accordion: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 16 4 L 18 6 L 16 8 L 18 10 L 16 12 L 18 14 L 16 16 L 18 18 L 2 18 L 4 16 L 2 14 L 4 12 L 2 10 L 4 8 L 2 6 L 4 4 L 2 2"/><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 16 4 L 4 4 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 6 L 18 6 L 16 8 L 4 8 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 18 10 L 16 12 L 4 12 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 14 L 18 14 L 16 16 L 4 16 Z" />`,
-        cursor: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round" d="M 6 10 A 1 1 0 0 0 14 10 A 1 1 0 0 0 6 10 M 1 10 L 6 10 M 14 10 L 19 10 M 10 1 L 10 6 M 10 14 L 10 19 M 10 8 L 10 12 M 8 10 L 12 10" />`
+        cursor: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round" d="M 6 10 A 1 1 0 0 0 14 10 A 1 1 0 0 0 6 10 M 1 10 L 6 10 M 14 10 L 19 10 M 10 1 L 10 6 M 10 14 L 10 19 M 10 8 L 10 12 M 8 10 L 12 10" />`,
+        trend: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-kinejoin="round" d="M 1 6 L 4 4 L 7 6 M 4 4 L 4 13 M 7 16 C 7 16 7 18 9 18 C 12 18 10 9 12 9 C 14 9 14 13 15 13 C 18 14 17.6667 5.6667 19 2"/>`
     }
 })
 

src/atoms/BaseIcon.vue

@@ -47,6 +47,7 @@ import VueUiTableHeatmap from "./vue-ui-table-heatmap.vue";
 import VueUiAccordion from "./vue-ui-accordion.vue";
 import VueUiQuickChart from "./vue-ui-quick-chart.vue";
 import VueUiCursor from "./vue-ui-cursor.vue";
+import VueUiSparkTrend from "./vue-ui-spark-trend.vue";
 
 const props = defineProps({
     component: { type: String },
@@ -55,7 +56,7 @@ const props = defineProps({
 })
 
 const isError = computed(() => {
-    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", "VueUiAccordion", "VueUiQuickChart", "VueUiCursor"].includes(props.component)
+    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", "VueUiAccordion", "VueUiQuickChart", "VueUiCursor", "VueUiSparkTrend"].includes(props.component)
 });
 
 const vue_ui_3d_bar = ref(null);
@@ -102,6 +103,7 @@ const vue_ui_xy = ref(null);
 const vue_ui_table_heatmap = ref(null);
 const vue_ui_quick_chart = ref(null);
 const vue_ui_cursor = ref(null);
+const vue_ui_spark_trend = ref(null);
 
 const emit = defineEmits([
     'selectLegend',
@@ -133,7 +135,7 @@ const recalculateHeight = ref(() => null);
 
 onMounted(() => {
     if (isError.value) {
-        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. VueUiAccordion\n. VueUiAgePyramid\n. VueUiAnnotator\n. VueUiCandlestick\n. VueUiChestnut\n. VueUiCursor\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. VueUiQuickChart\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`)
+        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. VueUiAccordion\n. VueUiAgePyramid\n. VueUiAnnotator\n. VueUiCandlestick\n. VueUiChestnut\n. VueUiCursor\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. VueUiQuickChart\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. VueUiSparkTrend\n. VueUiTableHeatmap\n. VueUiTableSparkline\n. VueUiTable\n. VueUiThermometer\n. VueUiTiremarks\n. VueUiVerticalBar\n. VueUiWaffle\n. VueUiWheel\n. VueUiXy\n\n`)
     }
 
     if(vue_ui_quick_chart.value) {
@@ -359,6 +361,13 @@ defineExpose({
         The provided component "{{ component }}" does not exist
     </div>
 
+    <VueUiSparkTrend
+        v-if="component === 'VueUiSparkTrend'"
+        :config="config"
+        :dataset="dataset"
+        ref="vue_ui_spark_trend"
+    />
+
     <VueUiCursor
         v-if="component === 'VueUiCursor'"
         :config="config"

src/components/vue-data-ui.vue

@@ -1136,7 +1136,6 @@ defineExpose({
                             :stroke="quickConfig.backgroundColor"
                             :stroke-width="quickConfig.barStrokeWidth"
                             stroke-linecap="round"
-                            class="quick-animation"
                             style="transition: all 0.3s ease-in-out"
                         />
                     </template>