[SIP-5] Refactor and improve histogram

[kristw]

• Replace original histogram code with @data-ui/histogram
• Use @vx/legend for legend
• Separate the component from slice and formData

Before

After

@williaster @conglei

[codecov-io]

Codecov Report

Merging #5758 into master will decrease coverage by 0.03%.
The diff coverage is 0%.

@@            Coverage Diff            @@
##           master   #5758      +/-   ##
=========================================
- Coverage   63.83%   63.8%   -0.04%     
=========================================
  Files         364     365       +1     
  Lines       23100   23111      +11     
  Branches     2587    2600      +13     
=========================================
  Hits        14745   14745              
- Misses       8340    8351      +11     
  Partials       15      15

Impacted Files	Coverage Δ
superset/assets/src/visualizations/sunburst.js	0% <ø> (ø)	⬆️
superset/assets/src/visualizations/WithLegend.jsx	0% <0%> (ø)
superset/assets/src/visualizations/Histogram.jsx	0% <0%> (ø)
...sualizations/deckgl/CategoricalDeckGLContainer.jsx	0% <0%> (ø)	⬆️
superset/assets/src/visualizations/cal_heatmap.js	0% <0%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0c33f80...9c3990e. Read the comment docs.

[williaster]

LGTM!!! excited this seems to have worked smoothly, still curious how it sizes correctly with the legend 🍀

[williaster]

I could see rect being better than circles given that bars are rectangle. If you do want them to render as rects, you can do something like (example here / storybook).

tldr

shape={({ fill, width, height }) => (
  <svg width={width} height={height}>
    <rect width={width} height={height} fill={fill} />
  </svg>
)}

[kristw]

Hah. nice.

[kristw]

Let me hold this one a bit. May wrap the legend and chart in flexbox to make sure. I feel that magic layout is too good to be true.

[kristw]

I write a layout component called WithLegend

• Given renderLegend and renderChart as render props, it will give space enough to render the legend and give the rest of the container to the chart (via flexbox).
• renderChart is wrapped in @vx/responsive/ParentSize and will be given parent. Developer then can pass parent.width and parent.height to the chart.
• Developer can also set the legend position (top, left, bottom, right), and it will put the legend there.
• It will also pass the flexDirection to the legend component, which @vx/legend can directly use to arrange item left-to-right or top-to-bottom appropriately. For example, legend on the top should arrange legend items left-to-right, legend on the right should arrange legend items top-to-bottom

p.s. The shape="rect" gives rect, but my screenshot above was outdated. Thanks for the custom shape tldr tho. Very useful.

[kristw]

position="top"

position="left"

position="right"

position="bottom"

[williaster]

this lgtm, I like the WithLegend component, it seems like it should be pretty flexible ( ;) ) with the various render props, too.

My only comment would be on aesthetics for the bottom orientation: should we match the flex-end justify-content alignment of the top orientation for consistency instead of center? or maybe flex-start for bottom? could get @elibrumbaugh 's thoughts on this as well, or I'm happy merging this to land it and making tweaks later.