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

feat: enable or disable ruler #765

Merged
merged 11 commits into from
Sep 15, 2020
Merged

feat: enable or disable ruler #765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
92397a8
feat: enable or disable ruler
JennChao Aug 26, 2020
37a6574
fix: enable ruler as default setting
JennChao Aug 26, 2020
c3cc44a
refactor: move isRulerEnabled into render
JennChao Aug 28, 2020
8b717ab
refactor: remove backdrop event listener
JennChao Aug 28, 2020
80725c4
Merge branch 'master' of https://github.com/JennChao/carbon-charts in…
JennChao Sep 2, 2020
e9c5602
Merge branch 'master' of https://github.com/JennChao/carbon-charts in…
JennChao Sep 3, 2020
5627d39
refactor: remove code for styling backdrop in ruler component
JennChao Sep 7, 2020
65a83e0
Merge branch 'master' of https://github.com/JennChao/carbon-charts in…
JennChao Sep 11, 2020
f1d3f56
refactor: flag for checking event listener added status
JennChao Sep 11, 2020
34adc72
Merge branch 'master' of https://github.com/JennChao/carbon-charts in…
JennChao Sep 15, 2020
9ee4f1c
refactor: refactor ruler component
JennChao Sep 15, 2020
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
31 changes: 20 additions & 11 deletions packages/core/src/components/axes/ruler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,28 @@ export class Ruler extends Component {
"y",
"enabled"
);
// flag for checking whether ruler event listener is added or not
isEventListenerAdded = false;

render() {
const isRulerEnabled = Tools.getProperty(
this.model.getOptions(),
"ruler",
"enabled"
);

this.drawBackdrop();
Copy link
Member

Choose a reason for hiding this comment

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

it seems like drawBackdrop is repeated in ruler & grid. Would ruler fully function without it?

Copy link
Contributor Author

@JennChao JennChao Aug 28, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

ruler needs backdrop since the event listener is applied on backdrop.
圖片

Copy link
Member

Choose a reason for hiding this comment

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

I get that ruler is dependant on backdrop, however I'm wondering if these lines are needed inside ruler.ts

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Actually, I am not sure about it. These lines of code have existed even before I added the ruler option.

Copy link
Member

Choose a reason for hiding this comment

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

Yes I'm just asking whether removing them on your end still makes everything work?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

As what I can see do far, removing code within line 253 to line 261 won't break any thing on my end.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Codes within line 253 to line 261 have already been removed.

this.addBackdropEventListeners();

if (isRulerEnabled && !this.isEventListenerAdded) {
this.addBackdropEventListeners();
} else if (!isRulerEnabled && this.isEventListenerAdded) {
this.removeBackdropEventListeners();
}
Copy link
Member

Choose a reason for hiding this comment

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

so we remove & add event listeners every time? This doesn't sound healthy, there should be a better way to only remove or add when we need to

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Since d3 doesn't have an api for checking whether a specific eventListener is already existed or not. Removing and then adding event listeners when needed is what we can do 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.

again this is the same situation as the other PR, we just need a boolean here to keep track of event listeners

Copy link
Contributor Author

@JennChao JennChao Sep 11, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

A flag, isEventListenerAdded, has been added.

}

removeBackdropEventListeners() {
this.isEventListenerAdded = false;
this.backdrop.on("mousemove mouseover mouseout", null);
}

formatTooltipData(tooltipData) {
Expand Down Expand Up @@ -203,6 +221,7 @@ export class Ruler extends Component {
* Adds the listener on the X grid to trigger multiple point tooltips along the x axis.
*/
addBackdropEventListeners() {
this.isEventListenerAdded = true;
const self = this;
const displayData = this.model.getDisplayData();

Expand Down Expand Up @@ -247,15 +266,5 @@ export class Ruler extends Component {
? "rect.chart-grid-backdrop.stroked"
: "rect.chart-grid-backdrop"
);

this.backdrop
.merge(backdropRect)
.attr("x", xScaleStart)
.attr("y", yScaleStart)
.attr("width", xScaleEnd - xScaleStart)
.attr("height", yScaleEnd - yScaleStart)
.lower();

backdropRect.attr("width", "100%").attr("height", "100%");
}
}
11 changes: 11 additions & 0 deletions packages/core/src/configuration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
RadarChartOptions,
// Components
GridOptions,
RulerOptions,
AxesOptions,
TimeScaleOptions,
TooltipOptions,
Expand Down Expand Up @@ -73,6 +74,15 @@ export const grid: GridOptions = {
}
};

/**
* Ruler options
*/
export const ruler: RulerOptions = {
// enable or disable ruler
enabled: true
};


/**
* Tooltip options
*/
Expand Down Expand Up @@ -150,6 +160,7 @@ const axisChart: AxisChartOptions = Tools.merge({}, chart, {
axes,
timeScale,
grid,
ruler,
zoomBar: {
top: {
enabled: false,
Expand Down
8 changes: 8 additions & 0 deletions packages/core/src/interfaces/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,14 @@ export interface GridOptions {
};
}

/**
* Ruler options
*/
export interface RulerOptions {
enabled?: boolean;
}


export interface BarOptions {
width?: number;
maxWidth?: number;
Expand Down