Ruler interaction replacing Grid mouse listeners for comparative tooltips #499

Forwarded question to designers 😉
I personally think it's better to keep it small (in case of really close data points), but we can maybe tweak it a little bit

gvnmagni · 2020-02-28T09:46:26Z

The snap to grid threshold seems a bit small to me, is that finalized?

Forwarded question to designers 😉
I personally think it's better to keep it small (in case of really close data points), but we can maybe tweak it a little bit

I'd support Luca's idea, since this kind of tooltip will be helpful especially when we'll have unusual data distributions, it would be better to keep this as small as possible.

Given this, we are totally open to make it few pixels wider if it works better, since we can change it at any time I'd say to try and to see what people think about it and, if necessary, adapt it eventually

theiliad

Haven't reviewed all of the code yet. I see lots of readability issues so far, but the demos seem to be functioning well. @zvonimirfras @cal-smith please chime in

@tw15egan feel free as well

packages/core/package.json

packages/core/src/components/axes/ruler.ts

lucafalasco · 2020-02-28T18:28:13Z

Haven't reviewed all of the code yet. I see lots of readability issues so far, but the demos seem to be functioning well.

@theiliad what do you mean with "readability issues"? are you talking about specific code readability (in that case what exactly did you find unreadable?) or are you referring to the ruler/tooltips functionality itself which you consider not clear enough?

zvonimirfras

A few quick possible improvements. I'll have to do a deeper read later.

packages/core/src/configuration.ts

packages/core/src/components/axes/ruler.ts

cal-smith · 2020-03-03T16:17:09Z

The box around the x-axis values doesn't look finished ... it seems like it might need some more padding ... is this the final design or still WIP?

Also, I haven't looked into the code yet, but (how) does this handle double x-axis, and only top x-axis?

lucafalasco · 2020-03-03T16:49:30Z

The box around the x-axis values doesn't look finished ... it seems like it might need some more padding ... is this the final design or still WIP?

Also, I haven't looked into the code yet, but (how) does this handle double x-axis, and only top x-axis?

thank you @cal-smith, apparently that was just an issue with firefox not handling a specific SVG attribute for baseline, should be ok now, and yes, the design is final.

Regarding different axis behaviours, this is the only one supported from the design at the moment.

lucafalasco · 2020-03-03T16:51:55Z

A few quick possible improvements. I'll have to do a deeper read later.

@zvonimirfras thanks, pushed a commit with some refactor before

cal-smith · 2020-03-04T16:57:34Z

thank you @cal-smith, apparently that was just an issue with firefox not handling a specific SVG attribute for baseline, should be ok now, and yes, the design is final.

Cool, just checked it out and that definitely looks better 👍

Co-Authored-By: Eliad Moosavi <[email protected]>

designertyler · 2020-04-21T18:25:05Z

I think I agree with @theiliad that the ruler shouldn't appear unless there's a value

yes we show that to enable tooltips on the grid, we should just stop showing if there are no values lying within that line.

One thing I noticed on hover is there's a double ruler when there are multiple values on a tick.

on white and g10 the second one is blue and the dark themes they're both white.

packages/core/demo/data/line.ts

natashadecoste · 2020-04-22T14:36:09Z

packages/core/src/components/axes/ruler.ts

+			// set current hovered elements
+			this.hoveredElements = hoveredElements;
+
+			this.services.events.dispatchEvent("show-tooltip", {


natashadecoste · 2020-04-22T14:40:15Z

packages/core/src/components/axes/ruler.ts

+	hideRuler() {
+		const svg = this.parent;
+		const ruler = DOMUtils.appendOrSelect(svg, "g.ruler");
+		const dataPointElements = svg.selectAll("[role=graphics-symbol]");


why use role to select instead of something like svg.selectAll("circle.dot"); ?
if it also works, it seems more conventional in this codebase

The use of that selector seemed to me more appropriate since we initially thought to enable the ruler on very different charts, which might have different graphic elements that need to be highlighted (for example, if I remember correctly there was an idea to have other shapes for the scatterplot other than circles - squares, triangles etc) that way we could have a single selector which includes all different svg elements.
But you're right, at the moment the circle.dot selector should work across all current scenarios 👍

packages/core/src/styles/components/_ruler.scss

Co-Authored-By: natashadecoste <[email protected]>

theiliad

Hi, couple of final touches we need:

scatter is showing no tooltip
same for bubble

lucafalasco · 2020-04-27T16:35:51Z

thanks @theiliad, that was an issue with linear scales, should be fixed now 👍

…tips (carbon-design-system#499) * add ruler and axis tooltip * move ruler logic to it's own graphFrameComponent * refactor, add axis tooltip dynamic width, add matching elements hovering * use getDomainValue instead of hardcoded accessor * add snap to nearest point * use getSVGElementSize to get backdrop height * remove useless code * add trigger mouseout in hideRuler to only highlight single hovered element * WIP * fix categorical scale elements mouseover trigger * fix close points mouseover/out trigger * fix import order and package version * add more test data * add crosshair cursor when ruler is active to better select data points * refactor, more docs * fix axis tooltip baseline * minor refactor Co-Authored-By: Zvonimir Fras <[email protected]> * change ruler color * a11y bubble * only show ruler for continuous domain - wip * add support for top axis * no need to support discrete scales anymore * make sure tooltip does not go out of axis bbox * remove axis tooltip * only show ruler if there's match with data points * only show ruler on timescale linechart * add filter for items getting null values at times, breaking tooltip * refactor * fix(core): update import path carbon-components fix carbon-design-system#546 * v0.30.7 * Merge pull request carbon-design-system#529 from theiliad/tabular-data-format * add basic tabular data format support * string updates * finalize line graph implementation with tabular data support * cleanup * finalize scatter graph with support for tabular data * commented out ideas for the data format * time-series support for tabular data within line graph * scatter support * optimize logic to find main vertical & horizontal axes * remove primary & secondary labels * bubble chart support * grouped bar support * horizontal grouped bar * fix legend filtering * fix bubble and scatter * fix bar hover errors * simple bar support * simple bar time-series support * horizontal simple bar support * more graph support * fix pie tooltip * fix donut center value * fix line & scatter demo ranges * fix bar demos * stacked data supprot * backwards data format compatibility * fix plotting of datums with a value of 0 * fixed stacked bar tooltip * remove primary, secondary, useAsGraphDomain/Range * Update packages/core/src/model.ts Co-Authored-By: natashadecoste <[email protected]> * apply suggested PR changes * fix group bar positioning issues * apply PR suggested changes * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * rename "identifier" to "mapsTo" * add tutorials section to core storybook * add links to errors * remove unnecessary comment * add custom color scale support * apply PR suggested changes * fix tests Co-authored-by: natashadecoste <[email protected]> * v0.30.8 * Apply suggestions from code review Co-Authored-By: Eliad Moosavi <[email protected]> * applied suggestions from review * fix ruler css * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * Update packages/core/src/styles/components/_ruler.scss Co-Authored-By: Eliad Moosavi <[email protected]> * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * add suggestions from review * Update packages/core/demo/data/line.ts Co-Authored-By: natashadecoste <[email protected]> * Apply suggestions from code review Co-Authored-By: natashadecoste <[email protected]> * enable ruler on bubble and scatter * disable mouse listeners on grid * enable ruler for every scale type * fix ruler on linear scales, refactor matches logic Co-authored-by: Zvonimir Fras <[email protected]> Co-authored-by: Natasha DeCoste <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]>

* Time series: add example to show the bug about labels * Time series: fix bug about labels * Revert "Time series: fix bug about labels" This reverts commit 7c055fe. * Fix linter problems * Fix logic computing timeIntervalName * Rename variables inside closestTimeIntervalName function * Time series axis: use scale nice * Remove useless demo example * fix scatter interface * v0.30.18 * Ruler interaction replacing Grid mouse listeners for comparative tooltips (#499) * add ruler and axis tooltip * move ruler logic to it's own graphFrameComponent * refactor, add axis tooltip dynamic width, add matching elements hovering * use getDomainValue instead of hardcoded accessor * add snap to nearest point * use getSVGElementSize to get backdrop height * remove useless code * add trigger mouseout in hideRuler to only highlight single hovered element * WIP * fix categorical scale elements mouseover trigger * fix close points mouseover/out trigger * fix import order and package version * add more test data * add crosshair cursor when ruler is active to better select data points * refactor, more docs * fix axis tooltip baseline * minor refactor Co-Authored-By: Zvonimir Fras <[email protected]> * change ruler color * a11y bubble * only show ruler for continuous domain - wip * add support for top axis * no need to support discrete scales anymore * make sure tooltip does not go out of axis bbox * remove axis tooltip * only show ruler if there's match with data points * only show ruler on timescale linechart * add filter for items getting null values at times, breaking tooltip * refactor * fix(core): update import path carbon-components fix #546 * v0.30.7 * Merge pull request #529 from theiliad/tabular-data-format * add basic tabular data format support * string updates * finalize line graph implementation with tabular data support * cleanup * finalize scatter graph with support for tabular data * commented out ideas for the data format * time-series support for tabular data within line graph * scatter support * optimize logic to find main vertical & horizontal axes * remove primary & secondary labels * bubble chart support * grouped bar support * horizontal grouped bar * fix legend filtering * fix bubble and scatter * fix bar hover errors * simple bar support * simple bar time-series support * horizontal simple bar support * more graph support * fix pie tooltip * fix donut center value * fix line & scatter demo ranges * fix bar demos * stacked data supprot * backwards data format compatibility * fix plotting of datums with a value of 0 * fixed stacked bar tooltip * remove primary, secondary, useAsGraphDomain/Range * Update packages/core/src/model.ts Co-Authored-By: natashadecoste <[email protected]> * apply suggested PR changes * fix group bar positioning issues * apply PR suggested changes * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * rename "identifier" to "mapsTo" * add tutorials section to core storybook * add links to errors * remove unnecessary comment * add custom color scale support * apply PR suggested changes * fix tests Co-authored-by: natashadecoste <[email protected]> * v0.30.8 * Apply suggestions from code review Co-Authored-By: Eliad Moosavi <[email protected]> * applied suggestions from review * fix ruler css * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * Update packages/core/src/styles/components/_ruler.scss Co-Authored-By: Eliad Moosavi <[email protected]> * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * add suggestions from review * Update packages/core/demo/data/line.ts Co-Authored-By: natashadecoste <[email protected]> * Apply suggestions from code review Co-Authored-By: natashadecoste <[email protected]> * enable ruler on bubble and scatter * disable mouse listeners on grid * enable ruler for every scale type * fix ruler on linear scales, refactor matches logic Co-authored-by: Zvonimir Fras <[email protected]> Co-authored-by: Natasha DeCoste <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> * Ruler fix (#598) * fix elements highlighting * fix multiple matching points * refactor * dead code * fix type * refactor reducer logic * more dead code * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * apply suggestion from review * rename * add orientation support * fix wrong y offset in mouse coords * better typing Co-authored-by: Eliad Moosavi <[email protected]> * fix vue type check for charting data * Add Svelte wrappers (#569) * feat: add svelte wrappers * chore(svelte): format babelrc, rollup config * chore(deps-dev): lock @storybook/svelte version Co-Authored-By: Eliad Moosavi <[email protected]> * chore(deps-dev): lock svelte version Co-Authored-By: Eliad Moosavi <[email protected]> * chore(deps-dev): lock svelte-loader version Co-Authored-By: Eliad Moosavi <[email protected]> * docs(svelte): fill in Codesandbox section * chore(svelte): define maintainers, contributors in package.json * docs(svelte): add codesandbox * chore(svelte): update package version to 0.30.18 Co-Authored-By: Eliad Moosavi <[email protected]> * chore(yarn): rebuild lockfile to fix errored ci Co-authored-by: Eliad Moosavi <[email protected]> * Update README.md * v0.30.19 * Merge pull request #581 from accurat/radar * Radar setup * Radar: create center and spokes * Radar refactor * Radar: Do not render anything if width or height are 0 * Radar: create blobs (wip) * Radar: set colors * Radar: refactor * Radar: create x axes * Radar: refactor * Radar: fix color opacity * Radar: Compute ticks with a minimum value * Radar: draw y axis * Radar: y axes start from the min tick value * Radar: add exit for x axes * Radar: blob creation refactor * Radar: rename classes * Radar: fix class name * Radar: mini refactor * Radar: fix blobs bind * Radar: style changes * Radar: fix min radius logic * Radar: bind displayData to x axes not data * Radar: add transitions * Radar: add key labels (wip) * Radar: change margin value * Radar: fix labels position * fix(core): fix backwards compatibility for pie/donut (#576) * fix(core): fix pie model to ignore dataset name when converting to tabular * apply review changes * provide all datapoint info to stacked bar tooltips (#573) * Merge pull request #574 from theiliad/axis-formatters * optimize axis tick formatting * Update packages/core/src/components/axes/axis.ts Co-Authored-By: natashadecoste <[email protected]> * optimize axis formatter for time-scale when user has already provided one Co-authored-by: natashadecoste <[email protected]> * v0.30.12 * fix(core): Support for Horizontal Line and Scatter Chart * fix line graph update issues * v0.30.13 * Change method name * v0.30.14 * Fix linting problem about methods order * v0.30.15 * Radar: fix y axes transitions * Code comments for tools.ts (#416) * update documentation for tools.ts * docs(tools.ts): api documentation Co-authored-by: Eliad Moosavi <[email protected]> * remove bbox dependency on pie labels * Merge pull request #588 from accurat/invalid-time-value-bug * Fix bug `RangeError Invalid time value` * Extends domain refactor * Time series: add example with addSpaceOnEdge = 0 * Rename functions * Change method order * v0.30.16 * v0.30.17 * Radar: use the new .join d3 method * Use join to manage enter, update, exit logic * Radar: fill missing data * Radar: fix animations but need a refactor * Radar: add events * Radar: add tooltip * Radar: miss an import * Radar: use groupMapsTo * Radar: number of spokes doesn't change * Radar: use groupMapsTo for data mapping * Radar: show NA when data are missing * Radar: add y labels * Radar: remove events on blobs * Radar: left align * Radar: create rectangles over x axis * Radar: make x axis dashed on mouse over * Radar: add dots * Radar: move utility functions in another file * Radar: fix radial label placement for negative angles * Radar: refactor * Radar: radialLabelPlacement refactor * Radar: better logic to center chart * Radar: fix x axis style when overed * Radar: change blobs opacity * Radar: create y axes transition * Radar: create x axes transition * Radar: create blobs transition * Radar: x and y labels transition * Radar: fix transitions * Radar: more left space for y labels * Radar: remove unused imports * Radar: use the right transitions * Radar: remove logs * Radar: remove debug stuff * Radar: update y labels * Radar: fix Firefox bug * Radar: move constants to configuration * Radar: rename variables * Radar: fix typo * Radar: update comments * Radar: move lodash methods inside Tools * Radar: add examples and make radar more generic * Radar: fix tooltip value * Radar: fix tooltip data order * Radar: fix radar default formatter * Radar: fix showing dots * Radar: use variable instead of recompute value * Radar: create enums from textAnchor and dominantBaseline values * Radar: put dots radius to radar configuration * Radar: use tabs instead of spaces * Radar: use helper function for accesing properties * Radar: get property from options Co-authored-by: natashadecoste <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Serena Girardi <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> * v0.30.20 Co-authored-by: Fei <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Luca Falasco <[email protected]> Co-authored-by: Zvonimir Fras <[email protected]> Co-authored-by: Natasha DeCoste <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Eric Liu <[email protected]> Co-authored-by: Serena Girardi <[email protected]>

…tips (carbon-design-system#499) * add ruler and axis tooltip * move ruler logic to it's own graphFrameComponent * refactor, add axis tooltip dynamic width, add matching elements hovering * use getDomainValue instead of hardcoded accessor * add snap to nearest point * use getSVGElementSize to get backdrop height * remove useless code * add trigger mouseout in hideRuler to only highlight single hovered element * WIP * fix categorical scale elements mouseover trigger * fix close points mouseover/out trigger * fix import order and package version * add more test data * add crosshair cursor when ruler is active to better select data points * refactor, more docs * fix axis tooltip baseline * minor refactor Co-Authored-By: Zvonimir Fras <[email protected]> * change ruler color * a11y bubble * only show ruler for continuous domain - wip * add support for top axis * no need to support discrete scales anymore * make sure tooltip does not go out of axis bbox * remove axis tooltip * only show ruler if there's match with data points * only show ruler on timescale linechart * add filter for items getting null values at times, breaking tooltip * refactor * fix(core): update import path carbon-components fix carbon-design-system#546 * v0.30.7 * Merge pull request carbon-design-system#529 from theiliad/tabular-data-format * add basic tabular data format support * string updates * finalize line graph implementation with tabular data support * cleanup * finalize scatter graph with support for tabular data * commented out ideas for the data format * time-series support for tabular data within line graph * scatter support * optimize logic to find main vertical & horizontal axes * remove primary & secondary labels * bubble chart support * grouped bar support * horizontal grouped bar * fix legend filtering * fix bubble and scatter * fix bar hover errors * simple bar support * simple bar time-series support * horizontal simple bar support * more graph support * fix pie tooltip * fix donut center value * fix line & scatter demo ranges * fix bar demos * stacked data supprot * backwards data format compatibility * fix plotting of datums with a value of 0 * fixed stacked bar tooltip * remove primary, secondary, useAsGraphDomain/Range * Update packages/core/src/model.ts Co-Authored-By: natashadecoste <[email protected]> * apply suggested PR changes * fix group bar positioning issues * apply PR suggested changes * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * rename "identifier" to "mapsTo" * add tutorials section to core storybook * add links to errors * remove unnecessary comment * add custom color scale support * apply PR suggested changes * fix tests Co-authored-by: natashadecoste <[email protected]> * v0.30.8 * Apply suggestions from code review Co-Authored-By: Eliad Moosavi <[email protected]> * applied suggestions from review * fix ruler css * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * Update packages/core/src/styles/components/_ruler.scss Co-Authored-By: Eliad Moosavi <[email protected]> * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * add suggestions from review * Update packages/core/demo/data/line.ts Co-Authored-By: natashadecoste <[email protected]> * Apply suggestions from code review Co-Authored-By: natashadecoste <[email protected]> * enable ruler on bubble and scatter * disable mouse listeners on grid * enable ruler for every scale type * fix ruler on linear scales, refactor matches logic Co-authored-by: Zvonimir Fras <[email protected]> Co-authored-by: Natasha DeCoste <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]>

…labels-bug * Time series: add example to show the bug about labels * Time series: fix bug about labels * Revert "Time series: fix bug about labels" This reverts commit 7c055fe. * Fix linter problems * Fix logic computing timeIntervalName * Rename variables inside closestTimeIntervalName function * Time series axis: use scale nice * Remove useless demo example * fix scatter interface * v0.30.18 * Ruler interaction replacing Grid mouse listeners for comparative tooltips (carbon-design-system#499) * add ruler and axis tooltip * move ruler logic to it's own graphFrameComponent * refactor, add axis tooltip dynamic width, add matching elements hovering * use getDomainValue instead of hardcoded accessor * add snap to nearest point * use getSVGElementSize to get backdrop height * remove useless code * add trigger mouseout in hideRuler to only highlight single hovered element * WIP * fix categorical scale elements mouseover trigger * fix close points mouseover/out trigger * fix import order and package version * add more test data * add crosshair cursor when ruler is active to better select data points * refactor, more docs * fix axis tooltip baseline * minor refactor Co-Authored-By: Zvonimir Fras <[email protected]> * change ruler color * a11y bubble * only show ruler for continuous domain - wip * add support for top axis * no need to support discrete scales anymore * make sure tooltip does not go out of axis bbox * remove axis tooltip * only show ruler if there's match with data points * only show ruler on timescale linechart * add filter for items getting null values at times, breaking tooltip * refactor * fix(core): update import path carbon-components fix carbon-design-system#546 * v0.30.7 * Merge pull request carbon-design-system#529 from theiliad/tabular-data-format * add basic tabular data format support * string updates * finalize line graph implementation with tabular data support * cleanup * finalize scatter graph with support for tabular data * commented out ideas for the data format * time-series support for tabular data within line graph * scatter support * optimize logic to find main vertical & horizontal axes * remove primary & secondary labels * bubble chart support * grouped bar support * horizontal grouped bar * fix legend filtering * fix bubble and scatter * fix bar hover errors * simple bar support * simple bar time-series support * horizontal simple bar support * more graph support * fix pie tooltip * fix donut center value * fix line & scatter demo ranges * fix bar demos * stacked data supprot * backwards data format compatibility * fix plotting of datums with a value of 0 * fixed stacked bar tooltip * remove primary, secondary, useAsGraphDomain/Range * Update packages/core/src/model.ts Co-Authored-By: natashadecoste <[email protected]> * apply suggested PR changes * fix group bar positioning issues * apply PR suggested changes * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * rename "identifier" to "mapsTo" * add tutorials section to core storybook * add links to errors * remove unnecessary comment * add custom color scale support * apply PR suggested changes * fix tests Co-authored-by: natashadecoste <[email protected]> * v0.30.8 * Apply suggestions from code review Co-Authored-By: Eliad Moosavi <[email protected]> * applied suggestions from review * fix ruler css * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * Update packages/core/src/styles/components/_ruler.scss Co-Authored-By: Eliad Moosavi <[email protected]> * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * add suggestions from review * Update packages/core/demo/data/line.ts Co-Authored-By: natashadecoste <[email protected]> * Apply suggestions from code review Co-Authored-By: natashadecoste <[email protected]> * enable ruler on bubble and scatter * disable mouse listeners on grid * enable ruler for every scale type * fix ruler on linear scales, refactor matches logic Co-authored-by: Zvonimir Fras <[email protected]> Co-authored-by: Natasha DeCoste <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> * Ruler fix (carbon-design-system#598) * fix elements highlighting * fix multiple matching points * refactor * dead code * fix type * refactor reducer logic * more dead code * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * apply suggestion from review * rename * add orientation support * fix wrong y offset in mouse coords * better typing Co-authored-by: Eliad Moosavi <[email protected]> * fix vue type check for charting data * Add Svelte wrappers (carbon-design-system#569) * feat: add svelte wrappers * chore(svelte): format babelrc, rollup config * chore(deps-dev): lock @storybook/svelte version Co-Authored-By: Eliad Moosavi <[email protected]> * chore(deps-dev): lock svelte version Co-Authored-By: Eliad Moosavi <[email protected]> * chore(deps-dev): lock svelte-loader version Co-Authored-By: Eliad Moosavi <[email protected]> * docs(svelte): fill in Codesandbox section * chore(svelte): define maintainers, contributors in package.json * docs(svelte): add codesandbox * chore(svelte): update package version to 0.30.18 Co-Authored-By: Eliad Moosavi <[email protected]> * chore(yarn): rebuild lockfile to fix errored ci Co-authored-by: Eliad Moosavi <[email protected]> * Update README.md * v0.30.19 * Merge pull request carbon-design-system#581 from accurat/radar * Radar setup * Radar: create center and spokes * Radar refactor * Radar: Do not render anything if width or height are 0 * Radar: create blobs (wip) * Radar: set colors * Radar: refactor * Radar: create x axes * Radar: refactor * Radar: fix color opacity * Radar: Compute ticks with a minimum value * Radar: draw y axis * Radar: y axes start from the min tick value * Radar: add exit for x axes * Radar: blob creation refactor * Radar: rename classes * Radar: fix class name * Radar: mini refactor * Radar: fix blobs bind * Radar: style changes * Radar: fix min radius logic * Radar: bind displayData to x axes not data * Radar: add transitions * Radar: add key labels (wip) * Radar: change margin value * Radar: fix labels position * fix(core): fix backwards compatibility for pie/donut (carbon-design-system#576) * fix(core): fix pie model to ignore dataset name when converting to tabular * apply review changes * provide all datapoint info to stacked bar tooltips (carbon-design-system#573) * Merge pull request carbon-design-system#574 from theiliad/axis-formatters * optimize axis tick formatting * Update packages/core/src/components/axes/axis.ts Co-Authored-By: natashadecoste <[email protected]> * optimize axis formatter for time-scale when user has already provided one Co-authored-by: natashadecoste <[email protected]> * v0.30.12 * fix(core): Support for Horizontal Line and Scatter Chart * fix line graph update issues * v0.30.13 * Change method name * v0.30.14 * Fix linting problem about methods order * v0.30.15 * Radar: fix y axes transitions * Code comments for tools.ts (carbon-design-system#416) * update documentation for tools.ts * docs(tools.ts): api documentation Co-authored-by: Eliad Moosavi <[email protected]> * remove bbox dependency on pie labels * Merge pull request carbon-design-system#588 from accurat/invalid-time-value-bug * Fix bug `RangeError Invalid time value` * Extends domain refactor * Time series: add example with addSpaceOnEdge = 0 * Rename functions * Change method order * v0.30.16 * v0.30.17 * Radar: use the new .join d3 method * Use join to manage enter, update, exit logic * Radar: fill missing data * Radar: fix animations but need a refactor * Radar: add events * Radar: add tooltip * Radar: miss an import * Radar: use groupMapsTo * Radar: number of spokes doesn't change * Radar: use groupMapsTo for data mapping * Radar: show NA when data are missing * Radar: add y labels * Radar: remove events on blobs * Radar: left align * Radar: create rectangles over x axis * Radar: make x axis dashed on mouse over * Radar: add dots * Radar: move utility functions in another file * Radar: fix radial label placement for negative angles * Radar: refactor * Radar: radialLabelPlacement refactor * Radar: better logic to center chart * Radar: fix x axis style when overed * Radar: change blobs opacity * Radar: create y axes transition * Radar: create x axes transition * Radar: create blobs transition * Radar: x and y labels transition * Radar: fix transitions * Radar: more left space for y labels * Radar: remove unused imports * Radar: use the right transitions * Radar: remove logs * Radar: remove debug stuff * Radar: update y labels * Radar: fix Firefox bug * Radar: move constants to configuration * Radar: rename variables * Radar: fix typo * Radar: update comments * Radar: move lodash methods inside Tools * Radar: add examples and make radar more generic * Radar: fix tooltip value * Radar: fix tooltip data order * Radar: fix radar default formatter * Radar: fix showing dots * Radar: use variable instead of recompute value * Radar: create enums from textAnchor and dominantBaseline values * Radar: put dots radius to radar configuration * Radar: use tabs instead of spaces * Radar: use helper function for accesing properties * Radar: get property from options Co-authored-by: natashadecoste <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Serena Girardi <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> * v0.30.20 Co-authored-by: Fei <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Luca Falasco <[email protected]> Co-authored-by: Zvonimir Fras <[email protected]> Co-authored-by: Natasha DeCoste <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Eric Liu <[email protected]> Co-authored-by: Serena Girardi <[email protected]>

lucafalasco force-pushed the tooltip-enh branch from eb5db67 to 7f08d6c Compare February 19, 2020 11:52

theiliad requested changes Feb 19, 2020

View reviewed changes

packages/core/src/components/axes/ruler.ts Outdated Show resolved Hide resolved

lucafalasco force-pushed the tooltip-enh branch 3 times, most recently from fbb86d2 to 5b9007b Compare February 24, 2020 13:32

lucafalasco marked this pull request as ready for review February 28, 2020 10:12

lucafalasco requested review from natashadecoste and a team as code owners February 28, 2020 10:12

lucafalasco changed the title ~~Add Ruler showing tooltips for continuous scales~~ Add Ruler triggering data points tooltips, add axis tooltips Feb 28, 2020

lucafalasco changed the title ~~Add Ruler triggering data points tooltips, add axis tooltips~~ Add Ruler triggering data points tooltips, add axis tooltips for continuous scales Feb 28, 2020

theiliad requested changes Feb 28, 2020

View reviewed changes

packages/core/package.json Outdated Show resolved Hide resolved

packages/core/src/components/axes/ruler.ts Outdated Show resolved Hide resolved

theiliad requested review from zvonimirfras and cal-smith February 28, 2020 16:50

lucafalasco force-pushed the tooltip-enh branch from a2e1749 to b44374f Compare March 2, 2020 14:49

lucafalasco requested a review from theiliad March 3, 2020 15:19

zvonimirfras suggested changes Mar 3, 2020

View reviewed changes

lucafalasco force-pushed the tooltip-enh branch 2 times, most recently from 24fe957 to bb46e7c Compare March 3, 2020 16:44

lucafalasco dismissed cal-smith’s stale review via db3d1f0 April 21, 2020 11:08

lucafalasco and others added 3 commits April 21, 2020 13:08

Update packages/core/src/styles/components/_ruler.scss

fc4ff2a

Co-Authored-By: Eliad Moosavi <[email protected]>

Update packages/core/src/components/axes/ruler.ts

b4d5bf3

Co-Authored-By: Eliad Moosavi <[email protected]>

add suggestions from review

ee1b29a

lucafalasco force-pushed the tooltip-enh branch from 0f02737 to ee1b29a Compare April 21, 2020 12:32

natashadecoste suggested changes Apr 22, 2020

View reviewed changes

lucafalasco and others added 2 commits April 23, 2020 14:37

Update packages/core/demo/data/line.ts

d63e6a4

Co-Authored-By: natashadecoste <[email protected]>

Apply suggestions from code review

7ef4e63

Co-Authored-By: natashadecoste <[email protected]>

lucafalasco changed the title ~~Add Ruler triggering data points tooltips on linechart~~ Ruler interaction replacing Grid mouse listeners for comparative tooltips Apr 23, 2020

theiliad mentioned this pull request Apr 23, 2020

feat(core): add area chart #412

Merged

lucafalasco added 3 commits April 23, 2020 21:08

enable ruler on bubble and scatter

00c55e3

disable mouse listeners on grid

2095c04

enable ruler for every scale type

7a17802

lucafalasco requested review from natashadecoste and theiliad April 24, 2020 09:30

theiliad requested changes Apr 24, 2020

View reviewed changes

fix ruler on linear scales, refactor matches logic

ced86b4

caesarsol mentioned this pull request Apr 27, 2020

Stacked Area chart #549

Merged

theiliad approved these changes Apr 27, 2020

View reviewed changes

natashadecoste approved these changes Apr 27, 2020

View reviewed changes

theiliad added the type: a11y ♿ label Apr 27, 2020

theiliad merged commit 57f4f1d into carbon-design-system:master Apr 27, 2020

theiliad deleted the tooltip-enh branch April 27, 2020 20:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ruler interaction replacing Grid mouse listeners for comparative tooltips #499

Ruler interaction replacing Grid mouse listeners for comparative tooltips #499

lucafalasco commented Feb 17, 2020 •

edited

Loading

netlify bot commented Feb 17, 2020 •

edited

Loading

netlify bot commented Feb 17, 2020 •

edited

Loading

netlify bot commented Feb 17, 2020 •

edited

Loading

theiliad commented Feb 24, 2020

lucafalasco commented Feb 28, 2020

gvnmagni commented Feb 28, 2020

theiliad left a comment •

edited

Loading

lucafalasco commented Feb 28, 2020 •

edited

Loading

zvonimirfras left a comment

cal-smith commented Mar 3, 2020

lucafalasco commented Mar 3, 2020

lucafalasco commented Mar 3, 2020 •

edited

Loading

cal-smith commented Mar 4, 2020

designertyler commented Apr 21, 2020

natashadecoste Apr 22, 2020

natashadecoste Apr 22, 2020

lucafalasco Apr 23, 2020

theiliad left a comment

lucafalasco commented Apr 27, 2020

Ruler interaction replacing Grid mouse listeners for comparative tooltips #499

Ruler interaction replacing Grid mouse listeners for comparative tooltips #499

Conversation

lucafalasco commented Feb 17, 2020 • edited Loading

Updates

Demo screenshot or recording

Deploy

netlify bot commented Feb 17, 2020 • edited Loading

netlify bot commented Feb 17, 2020 • edited Loading

netlify bot commented Feb 17, 2020 • edited Loading

theiliad commented Feb 24, 2020

lucafalasco commented Feb 28, 2020

gvnmagni commented Feb 28, 2020

theiliad left a comment • edited Loading

Choose a reason for hiding this comment

lucafalasco commented Feb 28, 2020 • edited Loading

zvonimirfras left a comment

Choose a reason for hiding this comment

cal-smith commented Mar 3, 2020

lucafalasco commented Mar 3, 2020

lucafalasco commented Mar 3, 2020 • edited Loading

cal-smith commented Mar 4, 2020

designertyler commented Apr 21, 2020

natashadecoste Apr 22, 2020

Choose a reason for hiding this comment

natashadecoste Apr 22, 2020

Choose a reason for hiding this comment

lucafalasco Apr 23, 2020

Choose a reason for hiding this comment

theiliad left a comment

Choose a reason for hiding this comment

lucafalasco commented Apr 27, 2020

lucafalasco commented Feb 17, 2020 •

edited

Loading

netlify bot commented Feb 17, 2020 •

edited

Loading

netlify bot commented Feb 17, 2020 •

edited

Loading

netlify bot commented Feb 17, 2020 •

edited

Loading

theiliad left a comment •

edited

Loading

lucafalasco commented Feb 28, 2020 •

edited

Loading

lucafalasco commented Mar 3, 2020 •

edited

Loading