Fixed typos in .d.ts file & improved VueUiSparkgauge component

graphieros · Mar 25, 2024 · 7378b7b · 7378b7b
1 parent 2466bc3
commit 7378b7b
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.38",
+  "version": "2.0.39",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

diff --git a/src/App.vue b/src/App.vue
@@ -2742,7 +2742,15 @@ const sparkGaugeDataset = ref({
   title: "Some KPI with a long name"
 })
 
-const sparkGaugeConfig = ref({})
+const sparkGaugeConfig = ref({
+  style: {
+    colors: {
+      min: "#FF0000",
+      max: "#00FF00",
+      showGradient: true
+    }
+  }
+})
 
 const universal = ref(null)
 
@@ -2863,7 +2871,7 @@ function testEmit2(data) {
       </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkgauge)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkgauge)">
         <template #title>
           <BaseIcon name="chartGauge"/>
           VueUiSparkgauge

diff --git a/src/components/vue-ui-sparkgauge.vue b/src/components/vue-ui-sparkgauge.vue
@@ -19,6 +19,7 @@ const props = defineProps({
     }
 })
 
+const uid = ref(createUid());
 const defaultConfig = ref(mainConfig.vue_ui_sparkgauge);
 
 const sparkgaugeConfig = computed(() => {
@@ -119,6 +120,12 @@ const trackColor = computed(() => {
         {{ nameLabel }}
     </div>
     <svg :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`overflow: visible; background:${sparkgaugeConfig.style.background}; width:100%;`">
+        <defs>
+            <linearGradient :id="`gradient_${ uid}`" x1="-10%" y1="100%" x2="110%" y2="100%">
+                <stop offset="0%" :stop-color="sparkgaugeConfig.style.colors.min"/>
+                <stop offset="100%" :stop-color="sparkgaugeConfig.style.colors.max"/>
+            </linearGradient>
+        </defs>
         <!-- GUTTER -->
         <path
             :d="`M${10} ${svg.base} A 1 1 0 1 1 ${118} ${svg.base}`"
@@ -131,7 +138,7 @@ const trackColor = computed(() => {
         <path
             v-if="valueRatio !== 0"
             :d="`M${10} ${svg.base} A 1 1 0 1 1 ${118} ${svg.base}`"
-            :stroke="trackColor"
+            :stroke="sparkgaugeConfig.style.colors.showGradient ? `url(#gradient_${uid})` : trackColor"
             :stroke-width="8"
             :stroke-linecap="sparkgaugeConfig.style.track.strokeLinecap"
             fill="none"

diff --git a/src/default_configs.json b/src/default_configs.json
@@ -3290,7 +3290,8 @@
             },
             "colors": {
                 "min": "#FF0000",
-                "max": "#00FF00"
+                "max": "#00FF00",
+                "showGradient": true
             },
             "track": {
                 "autoColor": true,

diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
@@ -10,7 +10,7 @@ declare module 'vue-data-ui' {
         config?: VueUi3dBarConfig | VueUiAgePyramidConfig | VueUiAnnotatorConfig | VueUiCandlestickConfig | VueUiChestnutConfig | VueUiDashboardConfig | VueUiDigitsConfig | VueUiDonutEvolutionConfig | VueUiDonutConfig | VueUiGaugeConfig | VueUiHeatmapConfig | VueUiMiniLoaderConfig | VueUiMoleculeConfig | VueUiMoodRadarConfig | VueUiNestedDonutsConfig | VueUiOnionConfig | VueUiQuadrantConfig | VueUiRadarConfig | VueUiRatingConfig | VueUiRelationCircleConfig | VueUiRingsConfig | VueUiScatterConfig | VueUiScreenshotConfig | VueUiSkeletonConfig | VueUiSmileyConfig | VueUiSparkbarConfig | VueUiSparkgaugeConfig | VueUiSparkHistogramConfig | VueUiSparklineConfig | VueUiSparkStackBarConfig | VueUiTableSparklineConfig | VueUiTableConfig | VueUiThermometerConfig | VueUiTiremarksConfig | VueUiVerticalBarConfig | VueUiWaffleConfig | VueUiWheelConfig | VueUiXyConfig
     }>
 
-    export type VueUiTooltipParams<TDatapoint, TSeries, TConfig, TBar, TLine, TPlot> = {
+    export type VueUiTooltipParams<TDatapoint, TSeries, TConfig, TBar=any, TLine=any, TPlot=any> = {
         seriesIndex?: number;
         series?: TSeries;
         datapoint?: TDatapoint;
@@ -58,6 +58,7 @@ declare module 'vue-data-ui' {
             colors?: {
                 min?: string;
                 max?: string;
+                showGradient?: boolean;
             };
             track?: {
                 autoColor?: boolean;
@@ -105,7 +106,7 @@ declare module 'vue-data-ui' {
     }
 
     export const VueUiMiniLoader: DefineComponent<{
-        config?: VueUiMiniLoaderConfig;
+        config?: VueUiMiniLoaderConfig
     }>
 
     export const Arrow: DefineComponent<{
@@ -471,11 +472,11 @@ declare module 'vue-data-ui' {
     export type VueUiIconName = "annotator" | "chart3bar" | "chartAgePyramid" | "chartBar" | "chartCandlestick" | "chartChestnut" | "chartDonut" | "chartDonutEvolution" | "chartGauge" | "chartHeatmap" | "chartLine" | "chartMoodbar" | "chartOnion" | "chartQuadrant" | "chartRadar" | "chartRelationCircle" | "chartRings" | "chartScatter" | "chartSparkHistogram" | "chartSparkStackbar" | "chartTable" | "chartThermometer" | "chartTiremarks" | "chartVerticalBar" | "chartWaffle" | "chartWheel" | "close" | "dashboard" | "digit0" | "digit1" | "digit2" | "digit3" | "digit4" | "digit5" | "digit6" | "digit7" | "digit8" | "digit9" | "excel" | "image" | "labelClose" | "labelOpen" | "menu" | "moodFlat" | "moodHappy" | "moodNeutral" | "moodSad" | "pdf" | "screenshot" | "skeleton" | "smiley" | "sort" | "spin" | "star" | "tableClose" | "tableOpen" | "chartNestedDonuts";
 
     export const VueUiIcon: DefineComponent<{
-        name: VueUiIconName;
-        stroke?: string;
-        strokeWidth?: number;
-        size?: number;
-        isSpin?: boolean;
+        name: VueUiIconName,
+        stroke?: string,
+        strokeWidth?: number,
+        size?: number,
+        isSpin?: boolean
     }>;
 
     export type VueUiDonutEvolutionConfig = {
@@ -779,7 +780,7 @@ declare module 'vue-data-ui' {
                     showPercentage?: boolean;
                     roundingValue?: number;
                     roundingPercentage?: number;
-                    customFormat?: (params: VueUiTooltipParams<VueUiRingsDatpoint, VueUiRingsDatapoint[], VueUiRingsConfig>) => string;
+                    customFormat?: (params: VueUiTooltipParams<VueUiRingsDatapoint, VueUiRingsDatapoint[], VueUiRingsConfig>) => string;
                 };
             };
         };
@@ -907,9 +908,6 @@ declare module 'vue-data-ui' {
     };
 
     export type VueUiSparkHistogramDatasetItem = {
-        value: number;
-        valueLabel?: string;
-        timeLabel?: string;
         intensity?: number & { 0: 0; 1: 1 };
         gradient?: string;
         height?: number;
@@ -985,7 +983,6 @@ declare module 'vue-data-ui' {
 
     export type VueUiSparkStackBarDatasetItem = {
         name: string;
-        value: number;
         color?: string;
         proportion?: number;
         proportionLabel?: string;
@@ -1217,8 +1214,8 @@ declare module 'vue-data-ui' {
     export type VueUiAnnotatorDataset = VueUiUnknownObj;
 
     export const VueUiAnnotator: DefineComponent<{
-        config?: VueUiAnnotatorConfig;
-        dataset: VueUiAnnotatorDataset;
+        config?: VueUiAnnotatorConfig,
+        dataset: VueUiAnnotatorDataset
     }>
 
     export type VueUiDashboardConfig = {
@@ -1255,8 +1252,8 @@ declare module 'vue-data-ui' {
     }
 
     export const VueUiDashboard: DefineComponent<{
-        config?: VueUiDashboardConfig;
-        dataset: VueUiDashboardElement[];
+        config?: VueUiDashboardConfig,
+        dataset: VueUiDashboardElement[]
     }>;
 
     export type VueUiSparkbarDatasetItem = {
@@ -1600,7 +1597,7 @@ declare module 'vue-data-ui' {
     export type VueUiCandlestickDatapoint = {
         high: { x: number; y: number; value: number };
         isBullish: boolean;
-        last: { x: number; y: number; value: numbr };
+        last: { x: number; y: number; value: number };
         low: { x: number; y: number; value: number };
         open: { x: number; y: number; value: number };
         period: string | undefined;
@@ -2179,7 +2176,7 @@ declare module 'vue-data-ui' {
 
     export const VueUiXy: DefineComponent<{
         component: "VueUi3dBar" | "VueUiAgePyramid" | "VueUiAnnotator" | "VueUiCandlestick" | "VueUiChestnut" | "VueUiDashboard" | "VueUiDigits" | "VueUiDonutEvolution" | "VueUiDonut" | "VueUiGauge" | "VueUiHeatmap" | "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",
-        config?: VueUiXyConfig
+        config?: VueUiXyConfig,
         dataset: VueUiXyDatasetItem[]
     }>