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

[explorev2] chart and controls #1251

Merged
merged 29 commits into from
Oct 6, 2016
Merged

[explorev2] chart and controls #1251

merged 29 commits into from
Oct 6, 2016

Conversation

ascott
Copy link

@ascott ascott commented Oct 4, 2016

  • adds a line chart using bootstrap data
  • using victory charts, victory theme for chart (same as data-dls currently)
  • lots to add in terms of functionality but want to keep PR's smaller.

to view explore v2 in progress, change url from explore to exploreV2
http://localhost:8081/caravel/exploreV2/table/3/?{...}

explore-v1
screenshot 2016-10-04 10 35 05

explore-v2
screenshot 2016-10-05 11 30 20

@vera-liu @bkyryliuk @mistercrunch @williaster

@@ -0,0 +1,175 @@
const { assign } = Object;
Copy link
Contributor

Choose a reason for hiding this comment

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

unrelated question, if we are not using babel-polyfill are we relying on Object.assign coming from chrome / the browser?

Copy link
Author

Choose a reason for hiding this comment

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

we use babel and these presets so Object.assign is polyfilled.

 "babel": "^6.3.26",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-airbnb": "^2.0.0",
    "babel-preset-react": "^6.11.1",

data: props.viz.data,
height: window.innerHeight,
label1: 'Label 1',
};
Copy link
Contributor

Choose a reason for hiding this comment

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

should you add this.getParamsFromUrl = this.getParamsFromUrl.bind(this) + same for formatDates?

Copy link
Author

@ascott ascott Oct 5, 2016

Choose a reason for hiding this comment

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

since getParamsFromUrl and formatDates don't need access to this we don't need to bind this to the methods. typically we would use bind(this) if we were passing a method to an event callback that needed access to the components context.

}

getParamsFromUrl() {
const hash = window.location.search;
Copy link
Contributor

Choose a reason for hiding this comment

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

curious if we've thought about using react router for url state management? I used it in dataportal and liked it.

Copy link
Author

Choose a reason for hiding this comment

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

this is a good suggestion... let's keep it in mind as we continue the refactor

formatDates(values) {
const newValues = values.map((val) => {
return {
x: moment(new Date(val.x)).format('MMM D'),
Copy link
Contributor

@williaster williaster Oct 5, 2016

Choose a reason for hiding this comment

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

FYI d3 also has really good date formatting utilities, not sure if it'd be more lightweight than moment.

Copy link
Author

Choose a reason for hiding this comment

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

yeah, i'm not sure either.. let's use moment for now and we can change to use d3 time utils in the future if that makes sense


getHeight() {
const navHeight = 90;
return (window.innerHeight - navHeight) + 'px';
Copy link
Contributor

Choose a reason for hiding this comment

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

do we use template literals anywhere or is this just a preference you have?
${window.innerHeight - navHeight}px

Copy link
Author

Choose a reason for hiding this comment

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

template literals are nice, will change. mostly just old habit here :)

export default class TimeSeriesLineChart extends React.Component {
constructor(props) {
super(props);
this.keysToColorsMap = this.mapKeysToColors(props.data);
Copy link
Contributor

Choose a reason for hiding this comment

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

similar question about binding component methods

Copy link
Author

Choose a reason for hiding this comment

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

methods only need to be bound in certain cases, first if the method needs access to this and depending on where the function is getting called, ie. in a callback after an event is triggered.

}

mapKeysToColors(data) {
// todo: what if there are more lines than colors in schemeCategory20c?
Copy link
Contributor

Choose a reason for hiding this comment

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

I believe that d3 performs i % lengthOfCategoryArray so that it just re-uses colors. still annoying that colors are re-used, need magic from @elibrumbaugh

Copy link
Contributor

Choose a reason for hiding this comment

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

also it might be worth checking with @mistercrunch about how he does colors currently. when there are multiple charts on a dashboard and they share some categories, ideally you do not assign/use two different colors for the same category on different charts. at one point he was hashing keys to always get the same color. not that trivial...

Copy link
Author

Choose a reason for hiding this comment

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

good points here. i'll make an issue to track this.

keysToColorsMap: PropTypes.object.isRequired,
};

export default class Legend extends React.Component {
Copy link
Contributor

Choose a reason for hiding this comment

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

why not a pure function here?

Copy link
Author

Choose a reason for hiding this comment

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

good point, will simplify this

}

render() {
const legendEls = this.props.data.map((d) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

eventually it'd be cool to make the legend expandable in the case that there are many series, then it wouldn't dominate most of the real estate in a dashboard chart

Copy link
Author

Choose a reason for hiding this comment

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

+1

@williaster
Copy link
Contributor

love the lack of grid lines 👯‍♂️ 👯 !!!

@ascott
Copy link
Author

ascott commented Oct 5, 2016

thanks for the review @williaster! made some changes. going to merge to master once tests are passing.

@ascott
Copy link
Author

ascott commented Oct 5, 2016

need to fix these linting errors:

/home/travis/build/airbnb/caravel/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx

  • 10:19 error 'viz' is missing in props validation react/prop-types
  • 10:23 error 'viz.data' is missing in props validation react/prop-types
  • 28:43 error Unexpected block statement surrounding arrow body arrow-body-style
  • 30:12 error 'moment' is not defined no-undef
  • 41:39 error 'height' is missing in props validation react/prop-types
  • 43:54 error 'viz' is missing in props validation react/prop-types
  • 43:58 error 'viz.form_data' is missing in props validation react/prop-types
  • 43:68 error 'viz.form_data.slice_name' is missing in props validation react/prop-types

/home/travis/build/airbnb/caravel/caravel/assets/javascripts/explorev2/components/charts/TimeSeriesLineChart.jsx

  • 29:39 error Unexpected block statement surrounding arrow body arrow-body-style

/home/travis/build/airbnb/caravel/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx

  • 39:31 error 'data' is missing in props validation react/prop-types
  • 39:36 error 'data.viz' is missing in props validation react/prop-types
  • 47:2 error Unnecessary semicolon no-extra-semi

@ascott ascott merged commit f837733 into apache:master Oct 6, 2016
@ascott ascott deleted the alanna-chart-and-controls branch October 6, 2016 02:41
@prokh
Copy link
Contributor

prokh commented Oct 6, 2016

@ascott You mentioned that the visualizations should be converted to react. Is the plan to replace in the basic charts NVD3 with Victory? Do you plan to wrap the visualizations that use only D3 into react components?

Switching from exploreV1 to exploreV2 gives the chance to implement faceting (e.g. multiple scatter plots in one viz, one for (a combination of) categorical variable(s) ). Example. Because the the subplots should use the same scaling for the data, there has to be some dependency between them.

zhaoyongjie pushed a commit to zhaoyongjie/incubator-superset that referenced this pull request Nov 17, 2021
zhaoyongjie pushed a commit to zhaoyongjie/incubator-superset that referenced this pull request Nov 24, 2021
zhaoyongjie pushed a commit to zhaoyongjie/incubator-superset that referenced this pull request Nov 25, 2021
zhaoyongjie pushed a commit to zhaoyongjie/incubator-superset that referenced this pull request Nov 26, 2021
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.12.0 labels Feb 19, 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.12.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants