Skip to content

Commit 7db1b4e

Browse files
graphierosgraphieros
committed
VueUiSparkline add bar type
1 parent e13da26 commit 7db1b4e

File tree

6 files changed

+52
-23
lines changed

6 files changed

+52
-23
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎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": "1.9.5",
4+
"version": "1.9.6",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2186,6 +2186,7 @@ const skeletonConfig = ref({
21862186
});
21872187
21882188
const sparklineConfig = ref({
2189+
type: 'bar',
21892190
style: {
21902191
backgroundColor: "#1A1A1A",
21912192
sparkline: {
@@ -2243,7 +2244,7 @@ const sparklineDataset = ref([
22432244
},
22442245
{
22452246
period: "period2",
2246-
value: -1,
2247+
value: 1,
22472248
},
22482249
{
22492250
period: "period3",
@@ -2255,56 +2256,52 @@ const sparklineDataset = ref([
22552256
},
22562257
{
22572258
period: "period5",
2258-
value: -4,
2259+
value: 4,
22592260
},
22602261
{
22612262
period: "period6",
22622263
value: 5,
22632264
},
22642265
{
22652266
period: "period6",
2266-
value: -6,
2267+
value: 6,
22672268
},
22682269
{
22692270
period: "period8",
22702271
value: 7,
22712272
},
22722273
{
22732274
period: "period9",
2274-
value: -8,
2275+
value: -7,
22752276
},
22762277
{
22772278
period: "period10",
2278-
value: 9,
2279+
value: -6,
22792280
},
22802281
{
22812282
period: "period11",
2282-
value: -10,
2283+
value: -5,
22832284
},
22842285
{
22852286
period: "period12",
2286-
value: 11,
2287+
value: -4,
22872288
},
22882289
{
22892290
period: "period13",
2290-
value: -12,
2291+
value: -3,
22912292
},
22922293
{
22932294
period: "period14",
2294-
value: 13,
2295+
value: -2,
22952296
},
22962297
{
22972298
period: "period15",
2298-
value: -14,
2299+
value: -1,
22992300
},
23002301
{
23012302
period: "period16",
2302-
value: 15,
2303-
},
2304-
{
2305-
period: "period17",
2306-
value: -16,
2307-
},
2303+
value: 0,
2304+
}
23082305
]);
23092306
23102307
const heatmapDataset = computed(() => {

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

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@ const mutableDataset = computed(() => {
9191
x: drawingArea.value.start + (i * (drawingArea.value.width / len.value)),
9292
y: drawingArea.value.bottom - (drawingArea.value.height * ratioToMax(absoluteValue + bottomPadding.value + absoluteMin.value)),
9393
id: `plot_${uid}_${i}`,
94-
color: sparklineConfig.value.style.area.useGradient ? shiftHue(sparklineConfig.value.style.line.color, 0.05 * ( 1 - (i / len.value))) : sparklineConfig.value.style.line.color
94+
color: isBar.value ? sparklineConfig.value.style.bar.color : sparklineConfig.value.style.area.useGradient ? shiftHue(sparklineConfig.value.style.line.color, 0.05 * ( 1 - (i / len.value))) : sparklineConfig.value.style.line.color,
95+
width: drawingArea.value.width / len.value
9596
}
9697
})
9798
});
@@ -126,6 +127,10 @@ const dataLabel = computed(() => {
126127
}
127128
});
128129
130+
const isBar = computed(() => {
131+
return sparklineConfig.value.type && sparklineConfig.value.type === 'bar';
132+
});
133+
129134
</script>
130135

131136
<template>
@@ -147,10 +152,18 @@ const dataLabel = computed(() => {
147152
<stop offset="0%" :stop-color="`${shiftHue(sparklineConfig.style.area.color, 0.05)}${opacity[sparklineConfig.style.area.opacity]}`"/>
148153
<stop offset="100%" :stop-color="sparklineConfig.style.area.color + opacity[sparklineConfig.style.area.opacity]" />
149154
</linearGradient>
155+
<linearGradient x2="0%" y2="100%" :id="`sparkline_bar_gradient_pos_${uid}`">
156+
<stop offset="0%" :stop-color="sparklineConfig.style.bar.color"/>
157+
<stop offset="100%" :stop-color="`${shiftHue(sparklineConfig.style.bar.color, 0.05)}`"/>
158+
</linearGradient>
159+
<linearGradient x2="0%" y2="100%" :id="`sparkline_bar_gradient_neg_${uid}`">
160+
<stop offset="0%" :stop-color="`${shiftHue(sparklineConfig.style.bar.color, 0.05)}`"/>
161+
<stop offset="100%" :stop-color="sparklineConfig.style.bar.color"/>
162+
</linearGradient>
150163
</defs>
151164

152165
<!-- AREA -->
153-
<g v-if="sparklineConfig.style.area.show">
166+
<g v-if="sparklineConfig.style.area.show && !isBar">
154167
<path
155168
data-cy="sparkline-smooth-area"
156169
v-if="sparklineConfig.style.line.smooth"
@@ -165,11 +178,11 @@ const dataLabel = computed(() => {
165178
/>
166179
</g>
167180

168-
<path data-cy="sparkline-smooth-path" v-if="sparklineConfig.style.line.smooth" :d="`M ${createSmoothPath(mutableDataset)}`" :stroke="sparklineConfig.style.line.color" fill="none" :stroke-width="sparklineConfig.style.line.strokeWidth" stroke-linecap="round"/>
181+
<path data-cy="sparkline-smooth-path" v-if="sparklineConfig.style.line.smooth && !isBar" :d="`M ${createSmoothPath(mutableDataset)}`" :stroke="sparklineConfig.style.line.color" fill="none" :stroke-width="sparklineConfig.style.line.strokeWidth" stroke-linecap="round"/>
169182

170183
<g v-for="(plot, i) in mutableDataset">
171184
<line
172-
v-if="i < mutableDataset.length - 1 && !sparklineConfig.style.line.smooth"
185+
v-if="i < mutableDataset.length - 1 && !sparklineConfig.style.line.smooth && !isBar"
173186
:data-cy="`sparkline-segment-${i}`"
174187
:x1="plot.x"
175188
:x2="mutableDataset[i + 1].x"
@@ -181,6 +194,15 @@ const dataLabel = computed(() => {
181194
stroke-linejoin="round"
182195
shape-rendering="geometricPrecision"
183196
/>
197+
<rect
198+
v-if="isBar"
199+
:x="plot.x - plot.width / 2"
200+
:y="plot.absoluteValue > 0 ? plot.y : absoluteZero"
201+
:width="plot.width"
202+
:height="Math.abs(plot.y - absoluteZero)"
203+
:fill="plot.absoluteValue > 0 ? `url(#sparkline_bar_gradient_pos_${uid})` : `url(#sparkline_bar_gradient_neg_${uid})`"
204+
:rx="sparklineConfig.style.bar.borderRadius"
205+
/>
184206
<!-- VERTICAL INDICATORS -->
185207
<line
186208
:data-cy="`sparkline-vertical-indicator-${i}`"

‎src/default_configs.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1459,6 +1459,7 @@
14591459
}
14601460
},
14611461
"vue_ui_sparkline": {
1462+
"type": "line",
14621463
"style": {
14631464
"backgroundColor":"#FFFFFF",
14641465
"fontFamily": "inherit",
@@ -1467,6 +1468,10 @@
14671468
"strokeWidth": 3,
14681469
"smooth": false
14691470
},
1471+
"bar": {
1472+
"borderRadius": 3,
1473+
"color":"#3366cc"
1474+
},
14701475
"zeroLine": {
14711476
"color": "#2D353C",
14721477
"strokeWidth": 1

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2205,6 +2205,7 @@ declare module 'vue-data-ui' {
22052205
};
22062206

22072207
export type VueUiSparklineConfig = {
2208+
type?: "line" | "bar";
22082209
style?: {
22092210
backgroundColor?: string;
22102211
fontFamily?: string;
@@ -2217,6 +2218,10 @@ declare module 'vue-data-ui' {
22172218
strokeWidth?: number;
22182219
smooth?: boolean;
22192220
};
2221+
bar?: {
2222+
borderRadius?: number;
2223+
color?: string;
2224+
};
22202225
zeroLine?: {
22212226
color?: string;
22222227
strokeWidth?: number;

0 commit comments

Comments
 (0)