+2 -2

manual-testing/backend/database.json

Reviewed

··· 1222 1222 "VueUiSkeleton": true, 1223 1223 "VueUiSmiley": true, 1224 1224 "VueUiSparkbar": true, 1225 1225 - "VueUiSparkgauge": false, 1225 1225 + "VueUiSparkgauge": true, 1226 1226 "VueUiSparkHistogram": false, 1227 1227 "VueUiSparkline": false, 1228 1228 "VueUiSparkStackbar": false, ··· 1247 1247 "customCheckList": {}, 1248 1248 "id": "3846f04c-685f-4509-8042-87b9c0b7ec33", 1249 1249 "createdAt": 1775989842046, 1250 1250 - "updatedAt": 1777093606437 1250 1250 + "updatedAt": 1777094405757 1251 1251 }, 1252 1252 { 1253 1253 "title": "Expose more methods",

+7

ts-playground/src/App.vue

Reviewed

··· 117 117 const TsVueUiSparkbar = defineAsyncComponent( 118 118 () => import('./components/charts/ts-vue-ui-sparkbar.vue'), 119 119 ); 120 120 + const TsVueUiSparkgauge = defineAsyncComponent( 121 121 + () => import('./components/charts/ts-vue-ui-sparkgauge.vue'), 122 122 + ); 120 123 121 124 const components = shallowRef([ 122 125 { name: 'VueUiXy' }, ··· 158 161 { name: 'VueUiRings' }, 159 162 { name: 'VueUiScatter' }, 160 163 { name: 'VueUiSparkbar' }, 164 164 + { name: 'VueUiSparkgauge' }, 161 165 ]); 162 166 163 167 const selectedComponent = shallowRef(components.value[0]); ··· 230 234 <TsVueUiRings v-if="selectedComponent?.name === 'VueUiRings'" /> 231 235 <TsVueUiScatter v-if="selectedComponent?.name === 'VueUiScatter'" /> 232 236 <TsVueUiSparkbar v-if="selectedComponent?.name === 'VueUiSparkbar'" /> 237 237 + <TsVueUiSparkgauge 238 238 + v-if="selectedComponent?.name === 'VueUiSparkgauge'" 239 239 + /> 233 240 </div> 234 241 </template> 235 242

-1

ts-playground/src/components/charts/ts-vue-ui-parallel-coordinate-plot.vue

Reviewed

··· 14 14 import KeyboardNavigationHint from '../slots/common/keyboard-navigation-hint.vue'; 15 15 import Watermark from '../slots/common/watermark.vue'; 16 16 import Skeleton from '../slots/common/skeleton.vue'; 17 17 - import PatternSlot from '../slots/common/pattern-slot.vue'; 18 17 import CommonAnnotatorActionColor from '../slots/common/annotator-action-color.vue'; 19 18 import CommonAnnotatorActionDraw from '../slots/common/annotator-action-draw.vue'; 20 19 import CommonAnnotatorActionUndo from '../slots/common/annotator-action-undo.vue';

+3

ts-playground/src/components/charts/ts-vue-ui-quadrant.vue

Reviewed

··· 1 1 <script setup lang="ts"> 2 2 + /** 3 3 + * This playground showcases all the slots and their implementations for <VueUiQuadrant> 4 4 + */ 2 5 import { computed } from 'vue'; 3 6 import { 4 7 VueUiQuadrant,

+3

ts-playground/src/components/charts/ts-vue-ui-quick-chart.vue

Reviewed

··· 1 1 <script setup lang="ts"> 2 2 + /** 3 3 + * This playground showcases all the slots and their implementations for <VueUiQuickChart> 4 4 + */ 2 5 import { computed } from 'vue'; 3 6 import { 4 7 VueUiQuickChart,

+3

ts-playground/src/components/charts/ts-vue-ui-radar.vue

Reviewed

··· 1 1 <script setup lang="ts"> 2 2 + /** 3 3 + * This playground showcases all the slots and their implementations for <VueUiRadar> 4 4 + */ 2 5 import { computed } from 'vue'; 3 6 import { 4 7 VueUiRadar,

+3

ts-playground/src/components/charts/ts-vue-ui-relation-circle.vue

Reviewed

··· 1 1 <script setup lang="ts"> 2 2 + /** 3 3 + * This playground showcases all the slots and their implementations for <VueUiRelationCircle> 4 4 + */ 2 5 import { computed } from 'vue'; 3 6 import { 4 7 VueUiRelationCircle,

+3

ts-playground/src/components/charts/ts-vue-ui-ridgeline.vue

Reviewed

··· 1 1 <script setup lang="ts"> 2 2 + /** 3 3 + * This playground showcases all the slots and their implementations for <VueUiRidgeline> 4 4 + */ 2 5 import { computed } from 'vue'; 3 6 import { 4 7 VueUiRidgeline,

+3

ts-playground/src/components/charts/ts-vue-ui-rings.vue

Reviewed

··· 1 1 <script setup lang="ts"> 2 2 + /** 3 3 + * This playground showcases all the slots and their implementations for <VueUiRings> 4 4 + */ 2 5 import { computed } from 'vue'; 3 6 import { 4 7 VueUiRings,

+3

ts-playground/src/components/charts/ts-vue-ui-scatter.vue

Reviewed

··· 1 1 <script setup lang="ts"> 2 2 + /** 3 3 + * This playground showcases all the slots and their implementations for <VueUiScatter> 4 4 + */ 2 5 import { computed } from 'vue'; 3 6 import { 4 7 VueUiScatter,

+9 -2

ts-playground/src/components/charts/ts-vue-ui-sparkbar.vue

Reviewed

··· 1 1 <script setup lang="ts"> 2 2 + /** 3 3 + * This playground showcases all the slots and their implementations for <VueUiSparkbar> 4 4 + */ 2 5 import { computed } from 'vue'; 3 3 - import { getVueDataUiConfig } from 'vue-data-ui'; 4 4 - import { VueUiSparkbar, type VueUiSparkbarConfig, type VueUiSparkbarDatasetItem } from 'vue-data-ui/vue-ui-sparkbar'; 6 6 + import { 7 7 + VueUiSparkbar, 8 8 + type VueUiSparkbarConfig, 9 9 + type VueUiSparkbarDatasetItem, 10 10 + } from 'vue-data-ui/vue-ui-sparkbar'; 11 11 + import 'vue-data-ui/style.css'; 5 12 6 13 const dataset = computed<VueUiSparkbarDatasetItem[]>(() => { 7 14 return [

+109

ts-playground/src/components/charts/ts-vue-ui-sparkgauge.vue

Reviewed

··· 1 1 + <script setup lang="ts"> 2 2 + /** 3 3 + * This playground showcases all the slots and their implementations for <VueUiSparkgauge> 4 4 + */ 5 5 + import { computed } from 'vue'; 6 6 + 7 7 + import { 8 8 + VueUiSparkgauge, 9 9 + type VueUiSparkgaugeConfig, 10 10 + type VueUiSparkgaugeDataset, 11 11 + } from 'vue-data-ui/vue-ui-sparkgauge'; 12 12 + 13 13 + import 'vue-data-ui/style.css'; 14 14 + import Skeleton from '../slots/common/skeleton.vue'; 15 15 + 16 16 + const dataset = computed<VueUiSparkgaugeDataset>(() => { 17 17 + return { 18 18 + value: -8, 19 19 + min: -10, 20 20 + max: 10, 21 21 + title: 'KPI 1', 22 22 + }; 23 23 + }); 24 24 + 25 25 + const config = computed<VueUiSparkgaugeConfig>(() => { 26 26 + return { 27 27 + skeletonConfig: null, 28 28 + skeletonDataset: null, 29 29 + debug: false, 30 30 + loading: false, 31 31 + theme: '', 32 32 + style: { 33 33 + fontFamily: 'inherit', 34 34 + background: '#FFFFFF', 35 35 + height: 84, 36 36 + basePosition: 72, 37 37 + animation: { 38 38 + show: true, 39 39 + speedMs: 150, 40 40 + }, 41 41 + title: { 42 42 + show: true, 43 43 + fontSize: 12, 44 44 + position: 'top', 45 45 + textAlign: 'center', 46 46 + bold: false, 47 47 + color: '#2D353C', 48 48 + }, 49 49 + dataLabel: { 50 50 + fontSize: 20, 51 51 + autoColor: true, 52 52 + color: '#2D353C', 53 53 + offsetY: 0, 54 54 + bold: true, 55 55 + rounding: 0, 56 56 + prefix: '', 57 57 + suffix: '', 58 58 + formatter: null, 59 59 + }, 60 60 + colors: { 61 61 + min: '#d62728', 62 62 + max: '#2ca02c', 63 63 + showGradient: true, 64 64 + }, 65 65 + track: { 66 66 + autoColor: true, 67 67 + color: '#1f77b4', 68 68 + strokeLinecap: 'round', 69 69 + }, 70 70 + gutter: { 71 71 + color: '#e1e5e8', 72 72 + strokeLinecap: 'round', 73 73 + }, 74 74 + }, 75 75 + }; 76 76 + }); 77 77 + </script> 78 78 + 79 79 + <template> 80 80 + <div> 81 81 + <VueUiSparkgauge :dataset :config> 82 82 + <template #source> 83 83 + <code style="color: chocolate"> #source </code> 84 84 + </template> 85 85 + 86 86 + <template #skeleton> 87 87 + <Skeleton /> 88 88 + </template> 89 89 + 90 90 + <template #chart-background> 91 91 + <div 92 92 + style=" 93 93 + width: 100%; 94 94 + height: 100%; 95 95 + background: linear-gradient( 96 96 + to bottom, 97 97 + #cccccc00, 98 98 + #cccccc90 99 99 + ); 100 100 + " 101 101 + > 102 102 + <code style="color: chocolate; font-size: 0.2rem"> 103 103 + #chart-background 104 104 + </code> 105 105 + </div> 106 106 + </template> 107 107 + </VueUiSparkgauge> 108 108 + </div> 109 109 + </template>

+16 -3

types/vue-data-ui.d.ts

Reviewed

··· 1127 1127 }; 1128 1128 }; 1129 1129 1130 1130 - export const VueUiSparkgauge: DefineComponent<{ 1130 1130 + export type VueUiSparkgaugeProps = { 1131 1131 dataset: VueUiSparkgaugeDataset; 1132 1132 config?: VueUiSparkgaugeConfig; 1133 1133 - }>; 1133 1133 + }; 1134 1134 + 1135 1135 + const VueUiSparkgaugeBase: DefineComponent<VueUiSparkgaugeProps>; 1136 1136 + 1137 1137 + export const VueUiSparkgauge: typeof VueUiSparkgaugeBase & { 1138 1138 + new (): { 1139 1139 + $slots: { 1140 1140 + ['chart-background']?: () => VNodeChild; 1141 1141 + source?: () => VNodeChild; 1142 1142 + skeleton?: () => VNodeChild; 1143 1143 + }; 1144 1144 + }; 1145 1145 + }; 1134 1146 1135 1147 export type VueUiMiniLoaderConfigType = { 1136 1148 gutterColor?: string; ··· 13952 13964 | 'vue_ui_stackline' 13953 13965 | 'vue_ui_dag' 13954 13966 | 'vue_ui_geo' 13955 13955 - | 'vue_ui_bump'; 13967 13967 + | 'vue_ui_bump' 13968 13968 + | 'vue_ui_sparkgauge'; 13956 13969 13957 13970 export type VueDataUiWordCloudTransformCallback = 13958 13971 | ((word: string) => string)

+20 -6

types/vue-ui-sparkgauge.d.ts

Reviewed

··· 1 1 - import type { DefineComponent } from 'vue'; 1 1 + import type { DefineComponent, VNodeChild } from 'vue'; 2 2 3 3 - export type { 3 3 + import type { 4 4 VueUiSparkgaugeDataset, 5 5 VueUiSparkgaugeConfig, 6 6 + VueUiSparkgaugeProps, 6 7 } from 'vue-data-ui'; 7 8 8 8 - declare const VueUiSparkgauge: DefineComponent<{ 9 9 - dataset: VueUiSparkgaugeDataset; 10 10 - config?: VueUiSparkgaugeConfig; 11 11 - }>; 9 9 + export type { 10 10 + VueUiSparkgaugeDataset, 11 11 + VueUiSparkgaugeConfig, 12 12 + VueUiSparkgaugeProps, 13 13 + }; 14 14 + 15 15 + declare const VueUiSparkgaugeBase: DefineComponent<VueUiSparkgaugeProps>; 16 16 + 17 17 + export const VueUiSparkgauge: typeof VueUiSparkgaugeBase & { 18 18 + new (): { 19 19 + $slots: { 20 20 + ['chart-background']?: () => VNodeChild; 21 21 + source?: () => VNodeChild; 22 22 + skeleton?: () => VNodeChild; 23 23 + }; 24 24 + }; 25 25 + }; 12 26 13 27 export default VueUiSparkgauge; 14 28 export { VueUiSparkgauge };