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.

Sign up for GitHub

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

[RFR] Responsive chart #249

Merged
merged 21 commits into from
Jul 12, 2018
Merged

[RFR] Responsive chart #249

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
d98f6d9
responsive chart resize event
zyhou Jul 5, 2018
3afe593
add removeEventListener event
zyhou Jul 5, 2018
5935c75
remove ie9 condition + add doc removeOnResize function
zyhou Jul 5, 2018
953e672
apply review
zyhou Jul 5, 2018
6a437fd
add breakpoint and display count tick config
zyhou Jul 5, 2018
d5f3d5f
add doc
zyhou Jul 5, 2018
34a2036
add test getBreakpointLabel
zyhou Jul 5, 2018
569054a
fix test
zyhou Jul 5, 2018
d04a819
add test display tick
zyhou Jul 6, 2018
ed82c73
review doc
zyhou Jul 9, 2018
9b7dee7
review initChart
zyhou Jul 9, 2018
de5fb75
Typo fix s/redraw/redraws/
sedy-bot Jul 9, 2018
36ffb89
add breakpoint in doc
zyhou Jul 9, 2018
871acb9
fix generate ticks + test
zyhou Jul 9, 2018
fdbf768
remove duplicate test
zyhou Jul 9, 2018
91f2365
add breakpoints in config
zyhou Jul 10, 2018
eacc059
calcul breakpoint on redraw
zyhou Jul 12, 2018
2be4abb
review about breakpointLabel
zyhou Jul 12, 2018
fd56c95
Typo fix s/methods/members/
sedy-bot Jul 12, 2018
1ff0a37
Typo fix s/returns a label of current breakpoint, [list of breakpoint…
sedy-bot Jul 12, 2018
f18f262
Typo fix s/destroy/destroy()/
sedy-bot Jul 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,3 +326,9 @@ This parameter configures the minimum zoom level available. Set it to a not-null
_Default: Infinity_

This parameter configures the maximum zoom level available. Set it to a lower value to prevent your users from zooming in too deeply.

### removeOnResize
Copy link
Contributor

Choose a reason for hiding this comment

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

I would remove this configuration parameter. Instead, I would expose a destroy method taking a callback as argument. Something like:

destroy: callback => {
    global.removeEventListener('resize', resizeListener);
    callback();
}


_Default: () => {}_

Function to be executed when you want to remove [`resize`](https://developer.mozilla.org/en-US/docs/Web/Events/resize) event.
30 changes: 25 additions & 5 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,15 @@ import { withinRange } from './withinRange';

// do not export anything else here to keep window.eventDrops as a function
export default ({ d3 = window.d3, ...customConfiguration }) => {
const chart = selection => {
const onResize = callback => {
Copy link
Contributor

Choose a reason for hiding this comment

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

No need for these functions. Just keep a reference to the event listener to be able to remove it in the destroy method.

window.addEventListener('resize', callback, true);
};

const removeOnResize = callback => {
window.removeEventListener('resize', callback, true);
};

const createChart = (root, selection) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

initChart

const config = defaultsDeep(
customConfiguration || {},
defaultConfiguration(d3)
Expand Down Expand Up @@ -41,10 +49,6 @@ export default ({ d3 = window.d3, ...customConfiguration }) => {

chart._scale = xScale;

const root = selection.selectAll('svg').data(selection.data());

root.exit().remove();

const svg = root
.enter()
.append('svg')
Expand Down Expand Up @@ -73,8 +77,24 @@ export default ({ d3 = window.d3, ...customConfiguration }) => {
.call(draw(config, xScale));
};

const chart = selection => {
const root = selection.selectAll('svg').data(selection.data());
Copy link
Contributor

Choose a reason for hiding this comment

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

Move these two lines in createChart

root.exit().remove();

createChart(root, selection);

const updateChart = () => {
selection.selectAll('svg').remove();
createChart(root, selection);
};

onResize(updateChart);
chart._removeOnResize = () => removeOnResize(updateChart);
};

chart.scale = () => chart._scale;
chart.filteredData = () => chart._filteredData;
chart.removeOnResize = () => chart._removeOnResize();

const draw = (config, scale) => selection => {
const { drop: { date: dropDate } } = config;
Expand Down