Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SIP-5] Refactor nvd3 #5838

Merged
merged 44 commits into from
Sep 17, 2018
Merged

[SIP-5] Refactor nvd3 #5838

merged 44 commits into from
Sep 17, 2018

Conversation

kristw
Copy link
Contributor

@kristw kristw commented Sep 6, 2018

  • Extract all usage of slice and formData
  • List all fields with PropTypes
  • Refactor utility functions into another file.

@williaster @conglei @graceguo-supercat

Copy link
Contributor

@williaster williaster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suuuuuch a gnarly file, thanks for going through it so thoroughly. I had a couple of pretty minor thoughts / none blocking, overall this looks great to me!

}),
]);

export const colorObjectType = PropTypes.shape({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rgbObjectType might be a little more specific / clear.

Q2: PropTypes.number,
Q3: PropTypes.number,
outliers: PropTypes.arrayOf(PropTypes.number),
whisker_high: PropTypes.number,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any use in camelCaseing this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah.. missed that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh. It is nvd3's internal thing.

]);

export const colorObjectType = PropTypes.shape({
r: PropTypes.number.isRequired,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how are you thinking about isRequired vs not? I'm not sure I have a strong opinion on this for now since just having types in general is a huge win here, mostly just curious.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good point. There were a few cases where it mysteriously breaks because some particular fields were omitted and I spent too much time figuring out. After found the cause, I was upset and add isRequired as warning, but this was not thoroughly verified for every field.

// 'pie' only
isDonut: PropTypes.bool,
isPieLabelOutside: PropTypes.bool,
pieLabelType: PropTypes.string,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this can be key, value, percent, key_value, or key_percent based on dropdown options. looks like key value and percent are supported by nvd3 and we have custom label generators for the others. do you think this is worth enumerating here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, will do.

showLegend: PropTypes.bool,
showMarkers: PropTypes.bool,
useRichTooltip: PropTypes.bool,
vizType: PropTypes.string,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you think it's worth enumerating types here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, will do.

})), []);
.filter(layer => layer.show)
.filter(layer => layer.annotationType === AnnotationTypes.TIME_SERIES)
.reduce((bushel, a) =>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, now I understand bushel 🤷‍♂️


// on scroll, hide tooltips. throttle to only 4x/second.
$(window).scroll(throttle(hideTooltips, 250));
window.addEventListener('scroll', throttle(hideTooltips, 250));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wow, didn't know this was there. wonder if this is necessary since the tooltips go away quickly anyway.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, kinda surprise, but I will not touch this for now.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot the exact reason it's there, but would dig as deep as needed in bit blame to understand the reason before/if removing it.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

from #3518 by chart annotation feature.

@mistercrunch
Copy link
Member

You get a 🏆 for even attempting the refactor of this file. I just saw that the now main maintainer of nvd3 has forked the project project to take it beyond d3 v3. May be too little too late for us on the longer term.

@kristw
Copy link
Contributor Author

kristw commented Sep 14, 2018

Yay! CI is green.

@kristw
Copy link
Contributor Author

kristw commented Sep 14, 2018

Release the Kraken! 🦑

@williaster
Copy link
Contributor

merging, big improvement!

@williaster williaster merged commit 0e93a94 into apache:master Sep 17, 2018
@kristw kristw deleted the kristw-nvd3 branch September 18, 2018 01:01
betodealmeida pushed a commit to lyft/incubator-superset that referenced this pull request Oct 12, 2018
* move into folder and scaffold adaptor

* extract width and height

* remove jquery

* extract showBrush

* extract lineInterpolation

* extract xAxisFormat and yAxisFormat

* extract annotationData

* extract xTicksLayout and colorScheme

* extract showXXX

* extract x and y axis labels

* extract showminmax

* extract pie chart props

* extract area chart props

* extract logscale and yAxisBounds

* extract margin

* extract bubble props x,y,size

* extract contribution, comparisonType and color_picker

* remove the last fd.xxx

* remove unnecessary variables

* remove slice.container

* fix unit test reference

* Rewrite logic to compute max label lengths to use only d3, not jquery.

* extract annotationLayers and no more slice.xxx in nvd3vis

* rename x, y, size to xField, yField, sizeField

* use arrow function

* move tooltip function

* extract helper functions into utils

* remove unused argument

* fix height calculation and show bar labels

* rename function

* update unit test

* organize tooltip generator

* update line_multi

* Add proptypes for data

* list proptypes for data

* extract tooltip function for bubble chart

* rename variables

* remove console.log

* enumerate vizTypes and pieLabelType

* parse maxBubble

* use new color scale

* fix import"

* remove line
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.28.0 labels Feb 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.28.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants