Skip to content

Commit 7378b7b

Browse files
graphierosgraphieros
committed
Fixed typos in .d.ts file & improved VueUiSparkgauge component
1 parent 2466bc3 commit 7378b7b

File tree

5 files changed

+36
-23
lines changed

5 files changed

+36
-23
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
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.38",
4+
"version": "2.0.39",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2742,7 +2742,15 @@ const sparkGaugeDataset = ref({
27422742
title: "Some KPI with a long name"
27432743
})
27442744
2745-
const sparkGaugeConfig = ref({})
2745+
const sparkGaugeConfig = ref({
2746+
style: {
2747+
colors: {
2748+
min: "#FF0000",
2749+
max: "#00FF00",
2750+
showGradient: true
2751+
}
2752+
}
2753+
})
27462754
27472755
const universal = ref(null)
27482756
@@ -2863,7 +2871,7 @@ function testEmit2(data) {
28632871
</template>
28642872
</Box>
28652873

2866-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkgauge)">
2874+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkgauge)">
28672875
<template #title>
28682876
<BaseIcon name="chartGauge"/>
28692877
VueUiSparkgauge

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const props = defineProps({
1919
}
2020
})
2121
22+
const uid = ref(createUid());
2223
const defaultConfig = ref(mainConfig.vue_ui_sparkgauge);
2324
2425
const sparkgaugeConfig = computed(() => {
@@ -119,6 +120,12 @@ const trackColor = computed(() => {
119120
{{ nameLabel }}
120121
</div>
121122
<svg :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`overflow: visible; background:${sparkgaugeConfig.style.background}; width:100%;`">
123+
<defs>
124+
<linearGradient :id="`gradient_${ uid}`" x1="-10%" y1="100%" x2="110%" y2="100%">
125+
<stop offset="0%" :stop-color="sparkgaugeConfig.style.colors.min"/>
126+
<stop offset="100%" :stop-color="sparkgaugeConfig.style.colors.max"/>
127+
</linearGradient>
128+
</defs>
122129
<!-- GUTTER -->
123130
<path
124131
:d="`M${10} ${svg.base} A 1 1 0 1 1 ${118} ${svg.base}`"
@@ -131,7 +138,7 @@ const trackColor = computed(() => {
131138
<path
132139
v-if="valueRatio !== 0"
133140
:d="`M${10} ${svg.base} A 1 1 0 1 1 ${118} ${svg.base}`"
134-
:stroke="trackColor"
141+
:stroke="sparkgaugeConfig.style.colors.showGradient ? `url(#gradient_${uid})` : trackColor"
135142
:stroke-width="8"
136143
:stroke-linecap="sparkgaugeConfig.style.track.strokeLinecap"
137144
fill="none"

‎src/default_configs.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3290,7 +3290,8 @@
32903290
},
32913291
"colors": {
32923292
"min": "#FF0000",
3293-
"max": "#00FF00"
3293+
"max": "#00FF00",
3294+
"showGradient": true
32943295
},
32953296
"track": {
32963297
"autoColor": true,

‎types/vue-data-ui.d.ts

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ declare module 'vue-data-ui' {
1010
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
1111
}>
1212

13-
export type VueUiTooltipParams<TDatapoint, TSeries, TConfig, TBar, TLine, TPlot> = {
13+
export type VueUiTooltipParams<TDatapoint, TSeries, TConfig, TBar=any, TLine=any, TPlot=any> = {
1414
seriesIndex?: number;
1515
series?: TSeries;
1616
datapoint?: TDatapoint;
@@ -58,6 +58,7 @@ declare module 'vue-data-ui' {
5858
colors?: {
5959
min?: string;
6060
max?: string;
61+
showGradient?: boolean;
6162
};
6263
track?: {
6364
autoColor?: boolean;
@@ -105,7 +106,7 @@ declare module 'vue-data-ui' {
105106
}
106107

107108
export const VueUiMiniLoader: DefineComponent<{
108-
config?: VueUiMiniLoaderConfig;
109+
config?: VueUiMiniLoaderConfig
109110
}>
110111

111112
export const Arrow: DefineComponent<{
@@ -471,11 +472,11 @@ declare module 'vue-data-ui' {
471472
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";
472473

473474
export const VueUiIcon: DefineComponent<{
474-
name: VueUiIconName;
475-
stroke?: string;
476-
strokeWidth?: number;
477-
size?: number;
478-
isSpin?: boolean;
475+
name: VueUiIconName,
476+
stroke?: string,
477+
strokeWidth?: number,
478+
size?: number,
479+
isSpin?: boolean
479480
}>;
480481

481482
export type VueUiDonutEvolutionConfig = {
@@ -779,7 +780,7 @@ declare module 'vue-data-ui' {
779780
showPercentage?: boolean;
780781
roundingValue?: number;
781782
roundingPercentage?: number;
782-
customFormat?: (params: VueUiTooltipParams<VueUiRingsDatpoint, VueUiRingsDatapoint[], VueUiRingsConfig>) => string;
783+
customFormat?: (params: VueUiTooltipParams<VueUiRingsDatapoint, VueUiRingsDatapoint[], VueUiRingsConfig>) => string;
783784
};
784785
};
785786
};
@@ -907,9 +908,6 @@ declare module 'vue-data-ui' {
907908
};
908909

909910
export type VueUiSparkHistogramDatasetItem = {
910-
value: number;
911-
valueLabel?: string;
912-
timeLabel?: string;
913911
intensity?: number & { 0: 0; 1: 1 };
914912
gradient?: string;
915913
height?: number;
@@ -985,7 +983,6 @@ declare module 'vue-data-ui' {
985983

986984
export type VueUiSparkStackBarDatasetItem = {
987985
name: string;
988-
value: number;
989986
color?: string;
990987
proportion?: number;
991988
proportionLabel?: string;
@@ -1217,8 +1214,8 @@ declare module 'vue-data-ui' {
12171214
export type VueUiAnnotatorDataset = VueUiUnknownObj;
12181215

12191216
export const VueUiAnnotator: DefineComponent<{
1220-
config?: VueUiAnnotatorConfig;
1221-
dataset: VueUiAnnotatorDataset;
1217+
config?: VueUiAnnotatorConfig,
1218+
dataset: VueUiAnnotatorDataset
12221219
}>
12231220

12241221
export type VueUiDashboardConfig = {
@@ -1255,8 +1252,8 @@ declare module 'vue-data-ui' {
12551252
}
12561253

12571254
export const VueUiDashboard: DefineComponent<{
1258-
config?: VueUiDashboardConfig;
1259-
dataset: VueUiDashboardElement[];
1255+
config?: VueUiDashboardConfig,
1256+
dataset: VueUiDashboardElement[]
12601257
}>;
12611258

12621259
export type VueUiSparkbarDatasetItem = {
@@ -1600,7 +1597,7 @@ declare module 'vue-data-ui' {
16001597
export type VueUiCandlestickDatapoint = {
16011598
high: { x: number; y: number; value: number };
16021599
isBullish: boolean;
1603-
last: { x: number; y: number; value: numbr };
1600+
last: { x: number; y: number; value: number };
16041601
low: { x: number; y: number; value: number };
16051602
open: { x: number; y: number; value: number };
16061603
period: string | undefined;
@@ -2179,7 +2176,7 @@ declare module 'vue-data-ui' {
21792176

21802177
export const VueUiXy: DefineComponent<{
21812178
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",
2182-
config?: VueUiXyConfig
2179+
config?: VueUiXyConfig,
21832180
dataset: VueUiXyDatasetItem[]
21842181
}>
21852182

0 commit comments

Comments
 (0)