Skip to content

Commit

Permalink
chore: refactor object emitted on click and hover events in heat, lin…
Browse files Browse the repository at this point in the history 
…e, parallel

        add lifecycle events, deprecate and rename Func events
        add data and target keys to click and hover object emitted

        BREAKING CHANGE: e.detail now contains two objects, data and target. To access data object, you now need to use e.detail.data. clickFunc, hoverFunc, and mouseOutFunc have been removed and replaced with clickEvent, hoverEvent, and mouseOutEvent, respectively
  • Loading branch information
@steph-modica @chris-demartini
steph-modica authored and chris-demartini committed Nov 16, 2021
1 parent fdfe30f commit fb0f2db
Show file tree
Hide file tree
Showing 12 changed files with 392 additions and 240 deletions.
44 changes: 26 additions & 18 deletions packages/heat-map/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,19 +205,23 @@ const changeHandler = d => {

[Events in stencil.js](https://stenciljs.com/docs/events) dispatch [Custom DOM events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) for other components to handle, we use Stencil's @Event() decorator to emit events (click, hover, mouseOut) from end user activity on our charts.

| Name | Type | Default Value(s) | Description |
| ----------------- | -------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `suppressEvents` | boolean | false | Suppresses and disables all event emitters. Setting to true can increase performance for non-interactive charts. |
| `cursor` | string | 'default' | Changes pointer type during mouse over on elements. Valid values are 'default' or 'pointer'. |
| `onClickFunc` | function | `undefined` | When clickFunc event occurs (e.g., mouse/keyboard click on chart geometry), this event handler will be called with the custom event object (e.g., e), containing data at e.detail. You will need to construct your own functionality of what actions to take within the callback. |
| `clickHighlight` | object[] | [] | Data used to track chart selections, an array of objects which includes keys that map to above accessors. |
| `clickStyle` | object (custom type) | [IClickStyleType](../types/src/prop-types.ts) | Sets the styling of elements when they are selected, _see object definition below_. |
| `onHoverFunc` | function | `undefined` | When hoverFunc event occurs (e.g., mouse hover/keyboard focus on chart geometry), this event handler will be called with the custom event object (e.g., e), containing data at e.detail. You will need to construct your own functionality of what actions to take within the callback. |
| `onMouseOutFunc` | function | `undefined` | When mouseOutFunc event occurs (e.g., mouse/keyboard blur on chart geometry), this event handler will be called, and has no data object. You will need to construct your own functionality of what actions to take within the callback. |
| `hoverHighlight` | object | {} | Datum object used to track active chart element, the object should include keys that map to above accessors. |
| `hoverStyle` | object (custom type) | [IHoverStyleType](../types/src/prop-types.ts) | Sets the styling of a elements when they are hovered/focused, _see object definition below_. |
| `interactionKeys` | string[] | [] | Sets the key names of data to interact with. |
| `hoverOpacity` | number | 1 | Sets opacity of inactive elements when hovering/focused on a chart geometry. |
| Name | Type | Default Value(s) | Description |
| ---------------------- | -------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `suppressEvents` | boolean | false | Suppresses and disables click, hover and mouseOut event emitters. Setting to true can increase performance for non-interactive charts. |
| `cursor` | string | 'default' | Changes pointer type during mouse over on elements. Valid values are 'default' or 'pointer'. |
| `onClickEvent` | function | `undefined` | When clickEvent event occurs (e.g., mouse/keyboard click on chart geometry), this event handler will be called with the custom event object (e.g., e), containing data and target node at e.detail `{data: d, target: n}`. You will need to construct your own functionality of what actions to take within the callback. |
| `clickHighlight` | object[] | [] | Data used to track chart selections, an array of objects which includes keys that map to above accessors. |
| `clickStyle` | object (custom type) | [IClickStyleType](../types/src/prop-types.ts) | Sets the styling of elements when they are selected, _see object definition below_. |
| `onHoverEvent` | function | `undefined` | When hoverEvent event occurs (e.g., mouse hover/keyboard focus on chart geometry), this event handler will be called with the custom event object (e.g., e), containing data and target node at e.detail `{data: d, target: n}`. You will need to construct your own functionality of what actions to take within the callback. |
| `onMouseOutEvent` | function | `undefined` | When mouseOutEvent event occurs (e.g., mouse/keyboard blur on chart geometry), this event handler will be called, and has no data object. You will need to construct your own functionality of what actions to take within the callback. |
| `hoverHighlight` | object | {} | Datum object used to track active chart element, the object should include keys that map to above accessors. |
| `hoverStyle` | object (custom type) | [IHoverStyleType](../types/src/prop-types.ts) | Sets the styling of elements when they are hovered/focused, _see object definition below_. |
| `interactionKeys` | string[] | [] | Sets the column names of data to interact with. |
| `hoverOpacity` | number | 1 | Sets opacity of inactive elements when hovering/focused on a chart geometry. |
| `onInitialLoadEvent` | function | `undefined` | When initalLoad event occurs (e.g., chart is mounted to window), this event handler will be called with the custom event object (e.g., e), containing the corresponding chartID at e.detail. You will need to construct your own functionality of what actions to take within the callback. |
| `onDrawStartEvent` | function | `undefined` | When drawStart event occurs (e.g., chart render function is called), this event handler will be called with the custom event object (e.g., e), containing the corresponding chartID at e.detail. You will need to construct your own functionality of what actions to take within the callback. |
| `onDrawEndEvent` | function | `undefined` | When drawEnd event occurs (e.g., chart's stencil lifecycle completes), this event handler will be called with the custom event object (e.g., e), containing the corresponding chartID at e.detail. You will need to construct your own functionality of what actions to take within the callback. |
| `onTransitionEndEvent` | function | `undefined` | When transitionEnd event occurs (e.g., chart geometry's transition lifecycle completes), this event handler will be called with the custom event object (e.g., e), containing the corresponding chartID at e.detail. You will need to construct your own functionality of what actions to take within the callback. |

<br>

Expand All @@ -242,12 +246,16 @@ const changeHandler = d => {
// note this only tracks a single click, you need your own logic to build the array of currnet selections made by user and then pass that result back to chart
//...
const clickHandler = evt => {
const d = evt.detail; // data is located here
const d = evt.detail.data; // data is located here
const t = evt.detail.target; // chart mark/label clicked is located here

this.currentClickedElement = [d]; // this is passed to clickHighlight prop
};

const hoverHandler = evt => {
const d = evt.detail; // data is located here
const d = evt.detail.data; // data is located here
const t = evt.detail.target; // chart mark/label clicked is located here

this.currentHoveredElement = d; // this is passed to hoverHighlight prop
};

Expand All @@ -262,11 +270,11 @@ const mouseOutHandler = evt => {
yAccessor="region"
valueAccessor="value"
interactionKeys={['region']}
onClickFunc={this.onClickFunc}
onClickEvent={this.onClickEvent}
clickHighlight={this.currentClickedElement}
clickStyle={this.clickStyle}
onHoverFunc={this.onHoverFunc}
onMouseOutFunc={this.onMouseOut}
onHoverEvent={this.onHoverEvent}
onMouseOutEvent={this.onMouseOut}
hoverHighlight={this.currentHoveredElement}
hoverStyle={this.hoverStyle}
/>
Expand Down
50 changes: 29 additions & 21 deletions packages/heat-map/src/components/app-heat-map/app-heat-map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1185,28 +1185,32 @@ export class AppHeatMap {
@Element()
appEl: HTMLElement;

onClickFunc(ev) {
const d = { ...ev.detail };
if (d) {
const newClicks = [...this.clickElement];
const keys = Object.keys(d);
const index = this.clickElement.findIndex(o => {
let conditionsMet = 0;
keys.forEach(key => {
conditionsMet += o[key] === d[key] ? 1 : 0;
});
return conditionsMet && conditionsMet === keys.length;
onClickFunc(d) {
let index = -1;
this.clickElement.forEach((el, i) => {
let keyMatch = [];
this.interactionKeys.forEach(k => {
k == 'date'
? el[k].getTime() == d.detail.data[k].getTime()
? keyMatch.push(true)
: keyMatch.push(false)
: el[k] == d.detail.data[k]
? keyMatch.push(true)
: keyMatch.push(false);
});
if (index > -1) {
newClicks.splice(index, 1);
} else {
newClicks.push(d);
}
this.clickElement = newClicks;
keyMatch.every(v => v === true) ? (index = i) : null;
});

const newClicks = [...this.clickElement];
if (index > -1) {
newClicks.splice(index, 1);
} else {
newClicks.push(d.detail.data);
}
this.clickElement = newClicks;
}
onHoverFunc(ev) {
this.hoverElement = { ...ev.detail };
this.hoverElement = { ...ev.detail.data };
}
onMouseOut() {
this.hoverElement = '';
Expand Down Expand Up @@ -1481,9 +1485,13 @@ export class AppHeatMap {
suppressEvents={this.suppressEvents}
hoverHighlight={this.hoverElement}
clickHighlight={this.clickElement}
onClickFunc={d => this.onClickFunc(d)}
onHoverFunc={d => this.onHoverFunc(d)}
onMouseOutFunc={() => this.onMouseOut()}
onClickEvent={d => this.onClickFunc(d)}
onHoverEvent={d => this.onHoverFunc(d)}
onMouseOutEvent={() => this.onMouseOut()}
onInitialLoadEvent={e => e} // console.log('load event', e.detail, e)}
onDrawStartEvent={e => e} // console.log('draw start event', e.detail, e)}
onDrawEndEvent={e => e} // console.log('draw end event', e.detail, e)}
onTransitionEndEvent={e => e} // console.log('transition event', e.detail, e)}
/>
</div>
);
Expand Down
36 changes: 30 additions & 6 deletions packages/heat-map/src/components/heat-map/heat-map-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,21 +237,45 @@ export interface IHeatMapProps {

/**
* @shortDescription Set a callback for click event on each data point.
* @controlName TextArea
* @controlName Toggle
* @groupName Events */
clickFunc: any;
clickEvent: any;

/**
* @shortDescription Set a callback to execute when mouse enters the chart.
* @controlName TextArea
* @controlName Toggle
* @groupName Events */
hoverFunc: any;
hoverEvent: any;

/**
* @shortDescription Set a callback to execute when mouse leaves the chart.
* @controlName TextArea
* @controlName Toggle
* @groupName Events */
mouseOutEvent: any;

/**
* @shortDescription Set a callback to execute when chart initially loads.
* @controlName Toggle
* @groupName Events */
initialLoadEvent: any;

/**
* @shortDescription Set a callback to execute when chart drawing starts.
* @controlName Toggle
* @groupName Events */
drawStartEvent: any;

/**
* @shortDescription Set a callback to execute when chart drawing ends.
* @controlName Toggle
* @groupName Events */
drawEndEvent: any;

/**
* @shortDescription Set a callback to execute when chart geometry transitions end.
* @controlName Toggle
* @groupName Events */
mouseOutFunc: any;
transitionEndEvent: any;

/**
* @shortDescription
Expand Down

0 comments on commit fb0f2db

Please sign in to comment.