Skip to content

Commit 0925ef2

Browse files
graphierosgraphieros
committed
Improvement - VueUiCirclePack - Add tooltip
1 parent 603bbe1 commit 0925ef2

File tree

7 files changed

+183
-318
lines changed

7 files changed

+183
-318
lines changed

‎README.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -287,10 +287,12 @@ The following charts bear these slots:
287287

288288
- VueUiAgePyramid
289289
- VueUiCandlestick
290+
- VueUiCirclePack
290291
- VueUiDonut
291292
- VueUiGalaxy
292293
- VueUiHeatmap
293294
- VueUiHistoryPlot
295+
- VueUiHorizontalBar
294296
- VueUiMolecule
295297
- VueUiNestedDonuts
296298
- VueUiOnion
@@ -304,12 +306,11 @@ The following charts bear these slots:
304306
- VueUiStackbar
305307
- VueUiStackline
306308
- VueUiTreemap
307-
- VueUiHorizontalBar
308309
- VueUiWordCloud
310+
- VueUiWorld
309311
- VueUiXy \*
310312
- VueUiXyCanvas
311313
- VueUiwaffle
312-
- VueUiWorld
313314

314315
\* VueUiXy slots specifically expose the following additional attributes:
315316

@@ -451,7 +452,7 @@ From the dataset you pass into the props, this component will produce the most a
451452
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background` | ✅ | ✅ |
452453
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
453454
| `VueUiChord` | `VueUiChordDataset` | `VueUiChordConfig` | `@selectLegend`, `@selectGroup`, `@selectRibbon`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
454-
| `VueUiCirclePack` | `VueUiCirclePackDatasetItem[]` | `VueUiCirclePackConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label`, `#data-label` | ✅ | ✅ |
455+
| `VueUiCirclePack` | `VueUiCirclePackDatasetItem[]` | `VueUiCirclePackConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label`, `#data-label`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
455456
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background` | ❌ | ✅ |
456457
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
457458
| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
@@ -628,7 +629,7 @@ User options actions available per chart:
628629
| VueUiCarouselTable | optionPdf, optionImg, optionCsv, optionAnimation, optionFullscreen |
629630
| VueUiChestnut | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
630631
| VueUiChord | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
631-
| VueUiCirclePack | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
632+
| VueUiCirclePack | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
632633
| VueUiDonut | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator |
633634
| VueUiDonutEvolution | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
634635
| VueUiDumbbell | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
@@ -763,7 +764,7 @@ However the following charts can be made fully responsive, making them better to
763764
| VueUiCarouselTable | - |
764765
| VueUiChestnut | - |
765766
| VueUiChord | ✅ |
766-
| VueUiCirclePack | ✅ (built-in) |
767+
| VueUiCirclePack | ✅ |
767768
| VueUiDonut | ✅ |
768769
| VueUiDonutEvolution | ✅ |
769770
| VueUiDumbbell | ✅ |

‎TestingArena/ArenaVueUiCirclePack.vue‎

Lines changed: 0 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -136,105 +136,6 @@ const model = ref([
136136
max: 100,
137137
},
138138
139-
{ key: "style.chart.circles.zoom.show", def: true, type: "checkbox" },
140-
{
141-
key: "style.chart.circles.zoom.shadowForce",
142-
def: 1,
143-
type: "range",
144-
min: 0,
145-
max: 1,
146-
step: 0.01,
147-
},
148-
{
149-
key: "style.chart.circles.zoom.opacity",
150-
def: 0.8,
151-
type: "range",
152-
min: 0,
153-
max: 1,
154-
step: 0.01,
155-
},
156-
{
157-
key: "style.chart.circles.zoom.animationFrameMs",
158-
def: 200,
159-
type: "range",
160-
min: 50,
161-
max: 1000,
162-
step: 50,
163-
},
164-
{
165-
key: "style.chart.circles.zoom.zoomRatio",
166-
def: 1,
167-
type: "range",
168-
min: 0.2,
169-
max: 2,
170-
step: 0.01,
171-
},
172-
{
173-
key: "style.chart.circles.zoom.label.name.fontSize",
174-
def: 14,
175-
type: "number",
176-
min: 8,
177-
max: 42,
178-
},
179-
{
180-
key: "style.chart.circles.zoom.label.name.bold",
181-
def: false,
182-
type: "checkbox",
183-
},
184-
{
185-
key: "style.chart.circles.zoom.label.name.offsetY",
186-
def: 0,
187-
type: "number",
188-
min: -100,
189-
max: 100,
190-
},
191-
{
192-
key: "style.chart.circles.zoom.label.name.color",
193-
def: "auto",
194-
type: "text",
195-
},
196-
{
197-
key: "style.chart.circles.zoom.label.value.fontSize",
198-
def: 14,
199-
type: "number",
200-
min: 8,
201-
max: 42,
202-
},
203-
{
204-
key: "style.chart.circles.zoom.label.value.bold",
205-
def: false,
206-
type: "checkbox",
207-
},
208-
{
209-
key: "style.chart.circles.zoom.label.value.offsetY",
210-
def: 0,
211-
type: "number",
212-
min: -100,
213-
max: 100,
214-
},
215-
{
216-
key: "style.chart.circles.zoom.label.value.rounding",
217-
def: 0,
218-
type: "number",
219-
min: 0,
220-
max: 6,
221-
},
222-
{
223-
key: "style.chart.circles.zoom.label.value.prefix",
224-
def: "P",
225-
type: "text",
226-
},
227-
{
228-
key: "style.chart.circles.zoom.label.value.suffix",
229-
def: "S",
230-
type: "text",
231-
},
232-
{
233-
key: "style.chart.circles.zoom.label.value.color",
234-
def: "auto",
235-
type: "text",
236-
},
237-
238139
{ key: 'userOptions.print.scale', def: 2, type: 'number', min: 1, max: 5},
239140
{ key: 'userOptions.print.allowTaint', def: true, type: 'checkbox'},
240141
{ key: 'userOptions.print.useCORS', def: true, type: 'checkbox'},

‎src/components/vue-ui-circle-pack.cy.js‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ describe('<VueUiCirclePack />', () => {
2222

2323
cy.log('datapoints');
2424
cy.get('[data-cy="datapoint-circle"]').should('exist').and('be.visible').and('have.length', dataset.length);
25+
cy.get('[data-cy="datapoint-circle-overlay"]').should('exist').and('have.length', dataset.length);
2526

2627
cy.log('name labels');
2728
cy.get('[data-cy="label-name"]').as('nameLabels').should('exist').and('be.visible').and('have.length', dataset.length);
@@ -40,20 +41,12 @@ describe('<VueUiCirclePack />', () => {
4041
});
4142
});
4243

43-
cy.log('zoom');
44+
cy.log('tooltip');
4445
cy.get('[data-cy="datapoint-circle"]').first().trigger('mouseenter', { force: true });
45-
cy.get('[data-cy="datapoint-zoom"]').as('zoom').should('exist').and('be.visible');
46-
cy.get('[data-cy="datapoint-zoom-label-name"]').as('zoomName').should('exist').and('be.visible').and('contain', 'd_');
47-
cy.get('[data-cy="datapoint-zoom-label-value"]').as('zoomValue').should('exist').and('be.visible').invoke('text').then(text => {
48-
const num = parseInt(text.trim(), 10);
49-
expect(num).to.be.a('number');
50-
});
51-
52-
cy.log('close zoom');
46+
cy.get('[data-cy=tooltip]').as('tooltip').should('exist')
47+
cy.get('[data-cy="datapoint-circle-overlay"]').first().should('be.visible');
5348
cy.get('[data-cy="datapoint-circle"]').first().trigger('mouseout');
54-
cy.get('@zoom').should('not.exist');
55-
cy.get('@zoomName').should('not.exist');
56-
cy.get('@zoomValue').should('not.exist');
49+
cy.get('@tooltip').should('not.exist');
5750
});
5851
});
5952
});

0 commit comments

Comments
 (0)