File tree Expand file tree Collapse file tree 1 file changed +0
-112
lines changed
packages/main/src/webComponents/Popover Expand file tree Collapse file tree 1 file changed +0
-112
lines changed Original file line number Diff line number Diff line change @@ -251,116 +251,4 @@ const PopoverComponent = () => {
251
251
</Story >
252
252
</Canvas >
253
253
254
- ## Popover: open on hover
255
-
256
- Hover over the ` MicroBarChart ` to see a more detailed view.
257
-
258
- <Canvas >
259
- <Story name = " open on hover" >
260
- { (args ) => {
261
- const [popoverIsOpen, setPopoverIsOpen] = useState (false );
262
- const handleOpen = () => {
263
- setPopoverIsOpen (true );
264
- };
265
- const handleClose = () => {
266
- setPopoverIsOpen (false );
267
- };
268
- return (
269
- <>
270
- <div id = " microBarChart" onMouseEnter = { handleOpen } onMouseLeave = { handleClose } style = { { width: ' 120px' }} >
271
- <MicroBarChart
272
- style = { { height: ' 70px' }}
273
- dimension = { {
274
- accessor: ' name'
275
- }}
276
- measure = { {
277
- accessor: ' data'
278
- }}
279
- dataset = { [
280
- {
281
- name: ' January' ,
282
- data: 100
283
- },
284
- {
285
- name: ' February' ,
286
- data: 300
287
- },
288
- {
289
- name: ' March' ,
290
- data: 530
291
- }
292
- ]}
293
- />
294
- </div >
295
- <Popover { ... args } open = { popoverIsOpen } opener = { ' microBarChart' } headerText = " Detailed Chart View" >
296
- <BarChart
297
- style = { { height: ' 400px' , width: ' 300px' }}
298
- dimensions = { [
299
- {
300
- accessor: ' name'
301
- }
302
- ]}
303
- measures = { [
304
- {
305
- accessor: ' data'
306
- }
307
- ]}
308
- dataset = { [
309
- {
310
- name: ' January' ,
311
- data: 100
312
- },
313
- {
314
- name: ' February' ,
315
- data: 300
316
- },
317
- {
318
- name: ' March' ,
319
- data: 530
320
- },
321
- {
322
- name: ' April' ,
323
- data: 450
324
- },
325
- {
326
- name: ' May' ,
327
- data: 420
328
- },
329
- {
330
- name: ' June' ,
331
- data: 455
332
- },
333
- {
334
- name: ' July' ,
335
- data: 300
336
- },
337
- {
338
- name: ' August' ,
339
- data: 70
340
- },
341
- {
342
- name: ' September' ,
343
- data: 220
344
- },
345
- {
346
- name: ' October' ,
347
- data: 350
348
- },
349
- {
350
- name: ' November' ,
351
- data: 415
352
- },
353
- {
354
- name: ' December' ,
355
- data: 350
356
- }
357
- ]}
358
- />
359
- </Popover >
360
- </>
361
- );
362
- }}
363
- </Story >
364
- </Canvas >
365
-
366
254
<Footer />
You can’t perform that action at this time.
0 commit comments