Skip to content

Commit 54ea262

Browse files
graphierosgraphieros
committed
New feature - Added VueUiStripPlot component
1 parent f9c2d2d commit 54ea262

File tree

14 files changed

+1191
-19
lines changed

14 files changed

+1191
-19
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
1414
![NPM](https://img.shields.io/npm/l/vue-data-ui)
1515
![npm](https://img.shields.io/npm/dt/vue-data-ui)
16-
![Static Badge](https://img.shields.io/badge/components-47-green)
16+
![Static Badge](https://img.shields.io/badge/components-48-green)
1717

1818
[Interactive documentation](https://vue-data-ui.graphieros.com/)
1919

@@ -41,6 +41,7 @@ Available components
4141
- [VueUiRelationCircle](https://vue-data-ui.graphieros.com/docs#vue-ui-relation-circle)
4242
- [VueUiRings](https://vue-data-ui.graphieros.com/docs#vue-ui-rings)
4343
- [VueUiScatter](https://vue-data-ui.graphieros.com/docs#vue-ui-scatter)
44+
- [VueUiStripPlot](https://vue-data-ui.graphieros.com/docs#vue-ui-strip-plot)
4445
- [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer)
4546
- [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)
4647
- [VueUiTreemap](https://vue-data-ui.graphieros.com/docs#vue-ui-treemap)
@@ -330,6 +331,7 @@ From the dataset you pass into the props, this component will produce the most a
330331
| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
331332
| `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
332333
| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
334+
| `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
333335
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
334336
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ❌ |
335337
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |

‎documentation/installation.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ From the dataset you pass into the props, this component will produce the most a
133133
| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
134134
| `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
135135
| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
136+
| `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
136137
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
137138
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ❌ |
138139
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |

‎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": "2.1.40",
4+
"version": "2.1.41",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
77
"keywords": [

‎src/App.vue‎

Lines changed: 136 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import AccordionTest from "./components/vue-ui-accordion.vue";
6262
import QuickTest from "./components/vue-ui-quick-chart.vue";
6363
import TestCursor from "./components/vue-ui-cursor.vue";
6464
import TestTrend from "./components/vue-ui-spark-trend.vue";
65+
import TestStrip from "./components/vue-ui-strip-plot.vue";
6566
6667
const dataset = ref([
6768
{
@@ -2181,7 +2182,8 @@ const skeletonOptions = ref([
21812182
'rings',
21822183
'wheel',
21832184
'donutEvolution',
2184-
'treemap'
2185+
'treemap',
2186+
'stripPlot'
21852187
]);
21862188
21872189
const skeletonChoice = ref('donutEvolution')
@@ -3369,6 +3371,112 @@ const pillConfig = ref({
33693371
}
33703372
})
33713373
3374+
const stripDataset = ref([
3375+
{
3376+
name: "Asia",
3377+
plots: [
3378+
{ name: "Shanghai", value: 24.9 },
3379+
{ name: "Beijing", value: 21.9 },
3380+
{ name: "Delhi", value: 16.8 },
3381+
{ name: "Guangzhou", value: 16.1 },
3382+
{ name: "Istanbul", value: 15.6 },
3383+
{ name: "Chengdu", value: 15.4 },
3384+
{ name: "Mumbai", value: 15.4 },
3385+
{ name: "Karachi", value: 14.9 },
3386+
{ name: "Shenzen", value: 14.7 },
3387+
{ name: "Tokyo", value: 14 },
3388+
]
3389+
},
3390+
{
3391+
name: "Africa",
3392+
plots: [
3393+
{ name: "Kinshasa", value: 17.1 },
3394+
{ name: "Lagos", value: 14.9 },
3395+
{ name: "Cairo", value: 9.3 },
3396+
{ name: "Johannesburg", value: 5.6 },
3397+
{ name: "Giza", value: 5.6 },
3398+
{ name: "Khartoum", value: 5.3 },
3399+
{ name: "Abidjan", value: 5 },
3400+
{ name: "Alexandria", value: 4.9 },
3401+
{ name: "Dar es Salaam", value: 4.7 },
3402+
{ name: "Nairobi", value: 4.4 },
3403+
]
3404+
},
3405+
{
3406+
name: "Europe",
3407+
plots: [
3408+
{ name: "Moscow", value: 13},
3409+
{ name: "London", value: 9},
3410+
{ name: "Saint Petersburg", value: 5.4},
3411+
{ name: "Berlin", value: 3.8},
3412+
{ name: "Madrid", value: 3.3},
3413+
{ name: "Kyiv", value: 3},
3414+
{ name: "Rome", value: 2.7},
3415+
{ name: "Paris", value: 2.1},
3416+
{ name: "Minsk", value: 2},
3417+
{ name: "Vienna", value: 1.9}
3418+
]
3419+
},
3420+
{
3421+
name: "America",
3422+
plots: [
3423+
{ name: "Sao Paulo", value: 12.2},
3424+
{ name: "Lima", value: 9.7},
3425+
{ name: "Mexico City", value: 9.2},
3426+
{ name: "New York", value: 8.4},
3427+
{ name: "Bogota", value: 8},
3428+
{ name: "Rio de Janeiro", value: 6.7},
3429+
{ name: "Santiago", value: 6.2},
3430+
{ name: "Los Angeles", value: 4},
3431+
{ name: "Buenos Aires", value: 3},
3432+
{ name: "Brasilia", value: 2.9}
3433+
]
3434+
},
3435+
{
3436+
name: "Australia & Oceania",
3437+
plots: [
3438+
{ name: "Sydney", value: 5.4},
3439+
{ name: "Melbourne", value: 5.1},
3440+
{ name: "Brisbane", value: 2.6},
3441+
{ name: "Perth", value: 2.1},
3442+
{ name: "Auckland", value: 1.7},
3443+
{ name: "Adelaide", value: 1.4},
3444+
{ name: "Honolulu", value: 1},
3445+
{ name: "Gold Coast", value: 0.7},
3446+
{ name: "Newcastle-Maitland", value: 0.5},
3447+
{ name: "Canberra", value: 0.46},
3448+
]
3449+
},
3450+
]);
3451+
3452+
const stripConfig = ref({
3453+
useCssAnimation: true,
3454+
style: {
3455+
chart: {
3456+
plots: {
3457+
radius: 20,
3458+
shape: "circle",
3459+
gradient: {
3460+
show: true,
3461+
intensity: 80
3462+
}
3463+
},
3464+
// tooltip: {
3465+
// customFormat: (test) => {
3466+
// console.log(test)
3467+
// return "TEST"
3468+
// }
3469+
// },
3470+
title: {
3471+
text: "Title",
3472+
subtitle: {
3473+
text: "Subtitle"
3474+
}
3475+
}
3476+
}
3477+
}
3478+
})
3479+
33723480
</script>
33733481

33743482
<template>
@@ -3509,10 +3617,35 @@ const pillConfig = ref({
35093617
<BaseIcon name="copy" stroke="#42d392" />
35103618
<BaseIcon name="cursor" stroke="#42d392" />
35113619
<BaseIcon name="trend" stroke="#42d392" />
3620+
<BaseIcon name="chartStripPlot" stroke="#42d392" />
35123621
</div>
35133622
</template>
35143623
</Box>
35153624

3625+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_strip_plot)">
3626+
<template #title>
3627+
<BaseIcon name="chartStripPlot"/>
3628+
VueUiStripPlot
3629+
</template>
3630+
<template #info>
3631+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
3632+
<BaseIcon name="pdf" stroke="#5f8bee"/>
3633+
<BaseIcon name="image" stroke="#5f8bee"/>
3634+
<BaseIcon name="excel" stroke="#5f8bee"/>
3635+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
3636+
</template>
3637+
<template #dev>
3638+
<TestStrip :dataset="stripDataset" :config="stripConfig" />
3639+
</template>
3640+
<template #prod>
3641+
<VueUiStripPlot :dataset="stripDataset" :config="stripConfig">
3642+
</VueUiStripPlot>
3643+
</template>
3644+
<template #config>
3645+
{{ PROD_CONFIG.vue_ui_strip_plot }}
3646+
</template>
3647+
</Box>
3648+
35163649
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_spark_trend)">
35173650
<template #title>
35183651
<BaseIcon name="trend"/>
@@ -3888,7 +4021,7 @@ const pillConfig = ref({
38884021
</template>
38894022
</Box>
38904023

3891-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_molecule)">
4024+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_molecule)">
38924025
<template #title>
38934026
<BaseIcon name="chartCluster"/>
38944027
VueUiMolecule
@@ -4090,7 +4223,7 @@ const pillConfig = ref({
40904223
</template>
40914224
</Box>
40924225

4093-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)">
4226+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)">
40944227
<template #title>
40954228
<BaseIcon name="skeleton"/>
40964229
VueUiSkeleton

‎src/atoms/BaseIcon.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,8 @@ const icons = computed(() => {
141141
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"/>`,
142142
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" />`,
143143
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" />`,
144-
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"/>`
144+
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"/>`,
145+
chartStripPlot: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" d="M 4 16 A 1 1 0 0 0 4 18 A 1 1 0 0 0 4 16 M 4 13 A 1 1 0 0 0 4 15 A 1 1 0 0 0 4 13 M 4 9 A 1 1 0 0 0 4 11 A 1 1 0 0 0 4 9 M 8 11 A 1 1 0 0 0 8 13 A 1 1 0 0 0 8 11 M 8 8 A 1 1 0 0 0 8 10 A 1 1 0 0 0 8 8 M 4 2 A 1 1 0 0 0 4 4 A 1 1 0 0 0 4 2 M 12 15 A 1 1 0 0 0 12 17 A 1 1 0 0 0 12 15 M 12 10 A 1 1 0 0 0 12 12 A 1 1 0 0 0 12 10 M 12 7 A 1 1 0 0 0 12 9 A 1 1 0 0 0 12 7 M 8 5 A 1 1 0 0 0 8 7 A 1 1 0 0 0 8 5 M 16 12 A 1 1 0 0 0 16 14 A 1 1 0 0 0 16 12 M 16 10 A 1 1 0 0 0 16 12 A 1 1 0 0 0 16 10 M 16 16 A 1 1 0 0 0 16 18 A 1 1 0 0 0 16 16" />`
145146
}
146147
})
147148

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

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import VueUiAccordion from "./vue-ui-accordion.vue";
4848
import VueUiQuickChart from "./vue-ui-quick-chart.vue";
4949
import VueUiCursor from "./vue-ui-cursor.vue";
5050
import VueUiSparkTrend from "./vue-ui-spark-trend.vue";
51+
import VueUiStripPlot from "./vue-ui-strip-plot.vue";
5152
5253
const props = defineProps({
5354
component: { type: String },
@@ -56,7 +57,7 @@ const props = defineProps({
5657
})
5758
5859
const isError = computed(() => {
59-
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)
60+
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", "VueUiStripPlot", "VueUiTableSparkline", "VueUiTable", "VueUiThermometer", "VueUiTiremarks", "VueUiVerticalBar", "VueUiWaffle", "VueUiWheel", "VueUiXy", "VueUiTreemap", "VueUiTableHeatmap", "VueUiAccordion", "VueUiQuickChart", "VueUiCursor", "VueUiSparkTrend"].includes(props.component)
6061
});
6162
6263
const vue_ui_3d_bar = ref(null);
@@ -104,6 +105,7 @@ const vue_ui_table_heatmap = ref(null);
104105
const vue_ui_quick_chart = ref(null);
105106
const vue_ui_cursor = ref(null);
106107
const vue_ui_spark_trend = ref(null);
108+
const vue_ui_strip_plot = ref(null);
107109
108110
const emit = defineEmits([
109111
'selectLegend',
@@ -135,7 +137,14 @@ const recalculateHeight = ref(() => null);
135137
136138
onMounted(() => {
137139
if (isError.value) {
138-
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`)
140+
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. VueUiStripPlot\n. VueUiTableHeatmap\n. VueUiTableSparkline\n. VueUiTable\n. VueUiThermometer\n. VueUiTiremarks\n. VueUiVerticalBar\n. VueUiWaffle\n. VueUiWheel\n. VueUiXy\n\n`)
141+
}
142+
143+
if(vue_ui_strip_plot.value) {
144+
generatePdf.value = vue_ui_strip_plot.value.generatePdf;
145+
generateImage.value = vue_ui_strip_plot.value.generateImage;
146+
generateCsv.value = vue_ui_strip_plot.value.generateCsv;
147+
getData.value = vue_ui_strip_plot.value.getData;
139148
}
140149
141150
if(vue_ui_quick_chart.value) {
@@ -361,6 +370,24 @@ defineExpose({
361370
The provided component "{{ component }}" does not exist
362371
</div>
363372

373+
<VueUiStripPlot
374+
v-if="component === 'VueUiStripPlot'"
375+
:config="config"
376+
:dataset="dataset"
377+
ref="vue_ui_strip_plot"
378+
@selectDatapoint="(d) => emit('selectDatapoint', d)"
379+
>
380+
<template #tooltip-before="{ datapoint, seriesIndex, dataset, config }">
381+
<slot name="tooltip-before" v-bind="{datapoint, seriesIndex, dataset, config }"></slot>
382+
</template>
383+
<template #tooltip-after="{ datapoint, seriesIndex, dataset, config }">
384+
<slot name="tooltip-after" v-bind="{ datapoint, seriesIndex, dataset, config }"></slot>
385+
</template>
386+
<template #svg="{ svg }">
387+
<slot name="svg" :svg="svg"></slot>
388+
</template>
389+
</VueUiStripPlot>
390+
364391
<VueUiSparkTrend
365392
v-if="component === 'VueUiSparkTrend'"
366393
:config="config"

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,6 @@ const immutableSet = computed(() => {
126126
absoluteValues: serie.values,
127127
}
128128
})
129-
// .sort((a,b) => b.value - a.value)
130129
});
131130
132131
const mutableSet = ref(immutableSet.value)

0 commit comments

Comments
 (0)