Missing docs @vx/shape

[visualcookie]

Hello.

I've updated @vx/shape to 0.0.181 which currently breaks my build, since somehow a new prop has been introduced called color which is required. I've checked the docs and have found nothing at all about this prop.

How does this prop work and what does it do? To not break the build, I've set the prop to color={() => false} which makes all my bars black.

[visualcookie]

Update: I've rechecked your commit messages and it seems that the color prop was zScale before. That solves the case.

Maybe it should be added to the docs.

Update again: Seems like onMouseMove and onMouseOut is missing aswell since latest update. I'm not able to display a tooltip anymore.

[hshoff]

There were a number of breaking changes of v0.0.181. While the docs a bit behind due to all of the updates we have other resources that are up to date.

• For a summary, motivation, and before + after of changes please see: RFC: Consistency and Control #383
• v0.0.181 changelog
• all gallery examples are up-to-date and using v0.0.181. Here's an example of a BarGroup that uses the color prop, a tooltip, and onMouseMove/onMouseOut: https://vx-demo.now.sh/bargroup

[visualcookie]

There were a number of breaking changes of v0.0.181. While the docs a bit behind due to all of the updates we have other resources that are up to date.

* For a summary, motivation, and before + after of changes please see: #383

* v0.0.181 [changelog](https://github.com/hshoff/vx/blob/master/CHANGELOG.md#v00181)

* all [gallery](https://vx-demo.now.sh/gallery) examples are up-to-date and using v0.0.181. Here's an example of a BarGroup that uses the color prop, a tooltip, and onMouseMove/onMouseOut: [vx-demo.now.sh/bargroup](https://vx-demo.now.sh/bargroup)

Thanks for the quick reply. Have already checked the first two links out. Looked over the gallery examples just now and on the BarGroup there's no example for the tooltip, but for an onClick.

After the update I was not able to get it working with onMouseMove/onMouseOut. Maybe my BarGroup is not correctly defined? Got no errors in console tho.

<BarGroup
  data={data}
  keys={keys}
  height={yMax}
  x0={x0}
  x0Scale={x0Scale}
  x1Scale={x1Scale}
  yScale={yScale}
  color={color}
  rx={4}
  onMouseMove={x => event => {
    this.handleTooltip(event, x)
  }}
  onMouseOut={() => hideTooltip}
/>

[hshoff]

here's one with tooltip, it follows the same pattern as the onClick: https://vx-demo.now.sh/barstack

       <BarGroup
          data={data}
          keys={keys}
          height={yMax}
          x0={x0}
          x0Scale={x0Scale}
          x1Scale={x1Scale}
          yScale={yScale}
          color={color}
        >
          {barGroups => {
            return barGroups.map(barGroup => {
              return (
                <Group key={`bar-group-${barGroup.index}-${barGroup.x0}`} left={barGroup.x0}>
                  {barGroup.bars.map(bar => {
                    return (
                      <rect
                        key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
                        x={bar.x}
                        y={bar.y}
                        width={bar.width}
                        height={bar.height}
                        fill={bar.color}
                        rx={4}
                        onMouseMove={event => {
                          this.handleTooltip(event, bar)
                        }}
                        onMouseOut={hideTooltip}
                      />
                    );
                  })}
                </Group>
              );
            });
          }}
        </BarGroup>

this change is outlined in the data binding section of: #383

[visualcookie]

Oh, so I need to do that extra <rect /> and can't apply it on the <BarGroup /> component anymore?

[hshoff]

Correct, this gives you more control over what is rendered while removing a confusing api design choice i made almost 2 years ago

[visualcookie]

@hshoff Thanks for the headsup there. Going to update the version now and applying all the breaking changes to make it work again.