vasturiano / icicle-chart Goto Github PK

Hi there,
first of all thank you very much for this framework and also for the suburst-chart 😁 👍
I would like to be able to reset the zoom when I click the same node again (see link below).

Maybe you could create a function where the return type is the zoomed node, then we could accomplish this feature with the click method.

Additional context
https://observablehq.com/@d3/zoomable-icicle (something like this maybe)

Best wishes

Describe the bug
I am building an icicle chart, with 4 to 5 levels (columns), from left to right. The labels on the first 3 columns are much shorter (all <30 characters) than the labels on the 4th and 5th column (can be > 100 characters). I would like to adjust the width of these columns, by setting the first 3 column to have much less width than the 4th and 5th column.

Setting the width using a function in the .size() parameter does not seem to work as I expected. It changes the height of the cell in LR orientation, and not the width.

To Reproduce
Steps to reproduce the behavior:

1. For ease, create a 3 (no need 5) column icicle chart. You can use my data sample

let data =  {
    "name": "root",
    "children": [
        {
            "name": "First Col",
            "children": [
                {
                    "name": "Second Col", 
                    "children": [
                        {"name": "Third Col 1", "value": 1}, 
                        {"name": "Third Col 2", "value": 1}, 
                        {"name": "Third Col 3", "value": 1}
                ]
            }
        ]
    }
]
}

2. In the JavaScript script, put size parameter, a function that returns value according to which column it is, for example

Icicle()
    .data(data)
    .size(d =>  {
        if (d.name.substring(0,5) == 'First') {
            return 10
        } else if (d.name.substring(0, 5) == 'Secon') {
            return 10
        } else {
            return 300
        }
    })
    (document.getElementById('myDiv'));

Expected behavior
The width of the first and second column should be much less than the third column.

Screenshots
However, instead of changing the width, the height change.
This is the sizes without setting the .size() parameter

This is the sizes after setting the .size() parameter

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari, Chrome

Your help will be very appreciated! :)

Is your feature request related to a problem? Please describe.
The current behavior of the chart in Mac is that when there is a 'wheel' event, the chart will either zoom in or zoom out. 'Wheel'ing is usually used for scrolling in Mac laptop. Thus, I cannot scroll, I can only zoom in and out of the chart.

Describe the solution you'd like
I would like the chart to be able to support scrolling. What I have done is I change the 'wheeling' listener. If it is wheeled and the 'Ctrl' key is pressed, it will zoom in or out. Otherwise, it will scroll as per normal. In the code of 'wheeling', I just added a
if (even.ctrlKey) { _wheel implementation_ }
However, after zooming, I am unable to scroll around, I can only see several nodes, the nodes that are in the current zoom view.

I want it such that when I zoom in, the other node that are not in the view are still there and I can still scroll around it. I have been looking at the implementation but I cannot clearly find which part of the code sets and update the width of the nodes to 0 after the node has been kicked out from the current view.

Describe alternatives you've considered
Currently, after zooming in to a certain section, I need to zoom out, then scroll around again.

If you like the feature request, I can help to implement and change for you!

Thank you for your kind help!

Describe the bug

The most recent change to this and other packages like kapsule, accessor-fn, float-tooltip, and probably some more, broke my unit-tests pipeline that uses Jest. Jest support for ES Modules is still in experimental phase so things are expected to break.

Details:

    /home/user/code/app/node_modules/float-tooltip/dist/float-tooltip.mjs:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { select, pointer } from 'd3-selection';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      3 | import React, { useEffect, useRef, useState } from "react";
      4 | import PropTypes from "prop-types";
    > 5 | import Icicle from "icicle-chart";
        | ^
      6 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
      7 | import {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1605:14)
      at Object.<anonymous> (node_modules/icicle-chart/dist/icicle-chart.common.js:12:15)
      at Object.<anonymous> (lib/components/TreeMap/TreeMap.tsx:5:1)
      at Object.<anonymous> (lib/components/TreeMap/TreeMap.stories.tsx:6:1)
      at Object.<anonymous> (lib/components/TreeMap/TreeMap.test.tsx:5:1)

It's okay to migrate to ES Modules but if you are dropping support for CommonJS I believe that the best thing to do is to publish a new major version since this is most likely a breaking change.

Also, if someone knows how to fix this so that Jest is able to process these modules, please let me know.

The text in the slices blur when the cursor moves between levels. The blur get worse the more you are zoomed in.

This appears most prevalent in Chrome.