Skip to content

Commit 5681a7b

Browse files
graphierosgraphieros
committed
Add emit examples for VueUiXy and VueUiDonut
1 parent 60e3242 commit 5681a7b

File tree

2 files changed

+113
-52
lines changed

2 files changed

+113
-52
lines changed

‎boilerplate.js‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,18 @@ export default ({
2525
</template>-->
2626
`;
2727

28-
// let emitFuncs = '';
29-
// let emitDefs = '';
28+
let emitFuncs = '';
29+
let emitDefs = '';
3030

31-
// if (emits && emits.length) {
32-
// emitFuncs = emits.map(emit => {
33-
// return `${useTypescript ? emit.funcTs : emit.func}`
34-
// }).toString().replaceAll(',', '\n\n');
31+
if (emits && emits.length) {
32+
emitFuncs = emits.map(emit => {
33+
return `${useTypescript ? emit.funcTs : emit.func}`
34+
}).toString().replaceAll(',', '\n\n');
3535

36-
// emitDefs = emits.map(emit => {
37-
// return `@${emit.name}="${emit.name}"`;
38-
// }).toString().replaceAll(',', '');
39-
// }
36+
emitDefs = emits.map(emit => {
37+
return `@${emit.name}="${emit.name}"`;
38+
}).toString().replaceAll(',', '');
39+
}
4040

4141

4242
return `
@@ -57,6 +57,8 @@ const config = ${useComputedConfig ? `computed${confType}(() => {
5757
return ${conf};
5858
})` : `ref${confType}(${conf})`};
5959
60+
${emitFuncs}
61+
6062
</script>
6163
6264
<template>
@@ -65,6 +67,7 @@ const config = ${useComputedConfig ? `computed${confType}(() => {
6567
component="${component}"
6668
${!datasetType ? '' : `:dataset="dataset"`}
6769
:config="config"
70+
${emitDefs}
6871
${componentSlots.length ? '>' : '/>'}
6972
${ componentSlots.length ? '<!-- Use slots here in template tags. Official Vue slots documentation https://vuejs.org/guide/components/slots -->' : '' }
7073
${ componentSlots.length ? `<!-- Documentation on Vue Data UI slots, check the slots tab at https://vue-data-ui.graphieros.com/docs#${componentLink} -->` : '' }

‎emits.js‎

Lines changed: 100 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default(componentName) => {
1+
export default (componentName) => {
22
const emitExamples = {
33
VueUiXy: [
44
{
@@ -19,10 +19,10 @@ export default(componentName) => {
1919
console.log({ legend });
2020
}`,
2121
funcTs: `type VueUiXySelectedLegend = {
22-
name: string
23-
values: number[]
24-
color: string
25-
type: 'line' | 'bar' | 'plot'
22+
readonly name: string
23+
readonly values: number[]
24+
readonly color: string
25+
readonly type: 'line' | 'bar' | 'plot'
2626
}
2727
/*
2828
* @selectLegend - Returns the current visible series when selecting / unselecting the legend
@@ -60,13 +60,13 @@ export default(componentName) => {
6060
*/
6161
type VueUiXySelectedX = {
6262
dataset: Array<{
63-
name: string
64-
value: number
65-
color: string
66-
type: 'line' | 'bar' | 'plot'
63+
readonly name: string
64+
readonly value: number
65+
readonly color: string
66+
readonly type: 'line' | 'bar' | 'plot'
6767
}>
68-
index: number
69-
indexLabel: string
68+
readonly index: number
69+
readonly indexLabel: string
7070
}
7171
function selectX(selectedX: VueUiXySelectedX) {
7272
console.log({ selectedX });
@@ -105,17 +105,17 @@ export default(componentName) => {
105105
*/
106106
type VueUiXySelectedTimeLabel = {
107107
datapoint: Array<{
108-
shape: 'circle' | 'triangle' | 'square' | 'dialond' | 'pentagon' | 'star' | 'hexagon'
109-
name: string
110-
color: string
111-
type: 'line' | 'bar' | 'plot'
112-
value: number
113-
comments: string[]
114-
prefix: string
115-
suffix: string
108+
readonly shape: 'circle' | 'triangle' | 'square' | 'diamond' | 'pentagon' | 'star' | 'hexagon'
109+
readonly name: string
110+
readonly color: string
111+
readonly type: 'line' | 'bar' | 'plot'
112+
readonly value: number
113+
readonly comments: string[]
114+
readonly prefix: string
115+
readonly suffix: string
116116
}>
117-
absoluteIndex: number
118-
label: string
117+
readonly absoluteIndex: number
118+
readonly label: string
119119
}
120120
function selectTimeLabel(selectedTimeLabel: VueUiXySelectedTimeLabel) {
121121
console.log({ selectedTimeLabel })
@@ -125,31 +125,89 @@ export default(componentName) => {
125125
],
126126
VueUiDonut: [
127127
{
128-
name: 'selectLegend',
128+
name: 'selectDatapoint',
129129
func: `/**
130-
* @selectLegend - Returns the current visible series when selecting / unselecting the legend
131-
*
132-
* @typedef {Object} VueUiDonutSelectedLegend
133-
* @property {string} name - The name of the legend item.
134-
* @property {number} value - The value associated with the legend item.
135-
* @property {string} color - The color representing the legend item.
136-
*
137-
* @param {VueUiDonutSelectedLegend[]} legend - The current visible series when selecting or unselecting the legend.
138-
* @returns {void}
139-
*/
140-
function selectLegend(legend){
141-
console.log({ legend });
130+
* @selectDatapoint - On click returns the data related to the selected donut arc
131+
*
132+
* @typedef {Object} VueUiDonutDatapoint
133+
* @property {number} index - The index of the datapoint in the dataset.
134+
* @property {number[]} absoluteValues - The array of absolute values associated with the datapoint.
135+
* @property {string} arcSlice - The SVG path describing the arc slice.
136+
* @property {Object} center - The center point of the donut slice.
137+
* @property {number} center.endX - The ending X coordinate of the center.
138+
* @property {number} center.endY - The ending Y coordinate of the center.
139+
* @property {string} center.path - The path associated with the center point.
140+
* @property {number} center.startX - The starting X coordinate of the center.
141+
* @property {number} center.startY - The starting Y coordinate of the center.
142+
* @property {string} color - The color of the datapoint slice.
143+
* @property {string} comment - A comment or note associated with the datapoint.
144+
* @property {number} cx - The X coordinate of the slice center.
145+
* @property {number} cy - The Y coordinate of the slice center.
146+
* @property {number} endX - The ending X coordinate of the arc.
147+
* @property {number} endY - The ending Y coordinate of the arc.
148+
* @property {Object} firstSeparator - The first separator coordinates for the arc.
149+
* @property {number} firstSeparator.x - The X coordinate of the first separator.
150+
* @property {number} firstSeparator.y - The Y coordinate of the first separator.
151+
* @property {string} name - The name of the datapoint.
152+
* @property {string} path - The SVG path of the arc.
153+
* @property {number} proportion - The proportion of the datapoint relative to the total.
154+
* @property {number} ratio - The ratio of the datapoint relative to the total.
155+
* @property {Object} separator - The separator coordinates for the arc.
156+
* @property {number} separator.x - The X coordinate of the separator.
157+
* @property {number} separator.y - The Y coordinate of the separator.
158+
* @property {number} seriesIndex - The index of the series to which the datapoint belongs.
159+
* @property {number} startX - The starting X coordinate of the arc.
160+
* @property {number} startY - The starting Y coordinate of the arc.
161+
* @property {number} value - The value associated with the datapoint.
162+
*
163+
* Logs the data related to the selected donut arc.
164+
*
165+
* @param {VueUiDonutDatapoint} datapoint - The data related to the selected donut arc.
166+
* @returns {void}
167+
*/
168+
function selectDatapoint(datapoint) {
169+
console.log(datapoint);
142170
}`,
143-
funcTs: `type VueUiDonutSelectedLegend = {
144-
name: string
145-
value: number
146-
color: string
171+
funcTs: `type VueUiDonutDatapoint = {
172+
readonly index: number
173+
readonly absoluteValues: number[]
174+
readonly arcSlice: string
175+
readonly center: {
176+
endX: number
177+
endY: number
178+
path: string
179+
startX: number
180+
startY: number
181+
}
182+
readonly color: string
183+
readonly comment: string
184+
readonly cx: number
185+
readonly cy: number
186+
readonly endX: number
187+
readonly endY: number
188+
readonly firstSeparator: {
189+
x: number
190+
y: number
191+
}
192+
readonly name: string
193+
readonly path: string
194+
readonly proportion: number
195+
readonly ratio: number
196+
readonly separator: {
197+
x: number
198+
y: number
199+
}
200+
readonly seriesIndex: number
201+
readonly startX: number
202+
readonly startY: number
203+
readonly value: number
147204
}
148-
/*
149-
* @selectLegend - Returns the current visible series when selecting / unselecting the legend
205+
206+
/**
207+
* @selectDatapoint - On click returns the data related to the selected donut arc
150208
*/
151-
function selectLegend(legend: VueUiDonutSelectedLegend[]){
152-
console.log({ legend });
209+
function selectDatapoint(datapoint: VueUiDonutDatapoint){
210+
console.log(datapoint)
153211
}`,
154212
},
155213
],

0 commit comments

Comments
 (0)