From 2f1e48ed983e05be2f71eced081e21bc09c68792 Mon Sep 17 00:00:00 2001 From: Eric Amodio Date: Wed, 5 Apr 2023 01:35:40 -0400 Subject: [PATCH] Updates billboard.js dependency Fixes scrubbing issues when data point is far vertically Avoids translate hacks for inverted X axis --- ThirdPartyNotices.txt | 2 +- package.json | 2 +- src/webviews/apps/plus/graph/minimap/minimap.ts | 48 ++++++++++++------------- yarn.lock | 12 +++---- 4 files changed, 32 insertions(+), 32 deletions(-) diff --git a/ThirdPartyNotices.txt b/ThirdPartyNotices.txt index c6051be..83ce666 100644 --- a/ThirdPartyNotices.txt +++ b/ThirdPartyNotices.txt @@ -12,7 +12,7 @@ This project incorporates components from the projects listed below. 7. @vscode/codicons version 0.0.32 (https://github.com/microsoft/vscode-codicons) 8. @vscode/webview-ui-toolkit version 1.2.2 (https://github.com/microsoft/vscode-webview-ui-toolkit) 9. ansi-regex version 6.0.1 (https://github.com/chalk/ansi-regex) -10. billboard.js version 3.7.4 (https://github.com/naver/billboard.js) +10. billboard.js version 3.8.0-next.2 (https://github.com/naver/billboard.js) 11. https-proxy-agent version 5.0.1 (https://github.com/TooTallNate/node-https-proxy-agent) 12. iconv-lite version 0.6.3 (https://github.com/ashtuchkin/iconv-lite) 13. lit version 2.7.2 (https://github.com/lit/lit) diff --git a/package.json b/package.json index a3fef4a..821c9da 100644 --- a/package.json +++ b/package.json @@ -13605,7 +13605,7 @@ "@vscode/codicons": "0.0.32", "@vscode/webview-ui-toolkit": "1.2.2", "ansi-regex": "6.0.1", - "billboard.js": "3.7.4", + "billboard.js": "3.8.0-next.2", "https-proxy-agent": "5.0.1", "iconv-lite": "0.6.3", "lit": "2.7.2", diff --git a/src/webviews/apps/plus/graph/minimap/minimap.ts b/src/webviews/apps/plus/graph/minimap/minimap.ts index 5ce2024..199091e 100644 --- a/src/webviews/apps/plus/graph/minimap/minimap.ts +++ b/src/webviews/apps/plus/graph/minimap/minimap.ts @@ -77,7 +77,6 @@ const styles = css` .bb svg { font: 10px var(--font-family); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - transform: translateX(2.5em) rotateY(180deg); } .bb-chart { @@ -142,7 +141,7 @@ const styles = css` .bb-region.visible-area { fill: var(--color-graph-minimap-visibleAreaBackground); - transform: translateY(-4px); + /* transform: translateY(-4px); */ } .bb-region.visible-area > rect { height: 100%; @@ -150,7 +149,7 @@ const styles = css` .bb-region.marker-result { fill: var(--color-graph-minimap-marker-highlights); - transform: translate(-1px, -4px); + transform: translateX(-1px); z-index: 10; } .bb-region.marker-result > rect { @@ -161,7 +160,7 @@ const styles = css` .bb-region.marker-head { fill: var(--color-graph-minimap-marker-head); stroke: var(--color-graph-minimap-marker-head); - transform: translate(-1px, -4px); + transform: translateX(-1px); } .bb-region.marker-head > rect { width: 1px; @@ -171,7 +170,7 @@ const styles = css` .bb-region.marker-head-arrow-left { fill: var(--color-graph-minimap-marker-head); stroke: var(--color-graph-minimap-marker-head); - transform: translate(-5px, -5px) skewX(45deg); + transform: translate(-5px, -1px) skewX(45deg); } .bb-region.marker-head-arrow-left > rect { width: 3px; @@ -181,7 +180,7 @@ const styles = css` .bb-region.marker-head-arrow-right { fill: var(--color-graph-minimap-marker-head); stroke: var(--color-graph-minimap-marker-head); - transform: translate(1px, -5px) skewX(-45deg); + transform: translate(1px, -1px) skewX(-45deg); } .bb-region.marker-head-arrow-right > rect { width: 3px; @@ -191,7 +190,7 @@ const styles = css` .bb-region.marker-upstream { fill: var(--color-graph-minimap-marker-upstream); stroke: var(--color-graph-minimap-marker-upstream); - transform: translate(-1px, -4px); + transform: translateX(-1px); } .bb-region.marker-upstream > rect { width: 1px; @@ -201,7 +200,7 @@ const styles = css` .bb-region.marker-branch { fill: var(--color-graph-minimap-marker-local-branches); stroke: var(--color-graph-minimap-marker-local-branches); - transform: translate(-2px, 32px); + transform: translate(-2px, 35px); } .bb-region.marker-branch > rect { width: 3px; @@ -211,7 +210,7 @@ const styles = css` .bb-region.marker-remote { fill: var(--color-graph-minimap-marker-remote-branches); stroke: var(--color-graph-minimap-marker-remote-branches); - transform: translate(-2px, 26px); + transform: translate(-2px, 29px); } .bb-region.marker-remote > rect { width: 3px; @@ -221,7 +220,7 @@ const styles = css` .bb-region.marker-stash { fill: var(--color-graph-minimap-marker-stashes); stroke: var(--color-graph-minimap-marker-stashes); - transform: translate(-2px, 32px); + transform: translate(-2px, 35px); } .bb-region.marker-stash > rect { width: 3px; @@ -231,7 +230,7 @@ const styles = css` .bb-region.marker-tag { fill: var(--color-graph-minimap-marker-tags); stroke: var(--color-graph-minimap-marker-tags); - transform: translate(-2px, 26px); + transform: translate(-2px, 29px); } .bb-region.marker-tag > rect { width: 3px; @@ -601,8 +600,8 @@ export class GraphMinimap extends FASTElement { private getVisibleAreaRegion(visibleDays: NonNullable): RegionOptions { return { axis: 'x', - start: visibleDays.bottom, - end: visibleDays.top, + start: visibleDays.top, + end: visibleDays.bottom, class: 'visible-area', } satisfies RegionOptions; } @@ -730,7 +729,6 @@ export class GraphMinimap extends FASTElement { bindto: this.chart, data: { x: 'date', - xSort: false, axes: { activity: 'y', }, @@ -769,17 +767,13 @@ export class GraphMinimap extends FASTElement { }, axis: { x: { - show: false, + inverted: true, localtime: true, type: 'timeseries', }, y: { min: 0, max: yMax, - show: true, - padding: { - bottom: 8, - }, }, }, clipPath: false, @@ -796,6 +790,13 @@ export class GraphMinimap extends FASTElement { point: true, zerobased: true, }, + padding: { + mode: 'fit', + bottom: -8, + left: 0, + right: 0, + top: 0, + }, point: { show: true, select: { @@ -906,13 +907,12 @@ export class GraphMinimap extends FASTElement { }, grouped: true, position: (_data, width, _height, element, pos) => { - const { x } = pos; + let { x } = pos; const rect = (element as HTMLElement).getBoundingClientRect(); - let left = rect.right - x; - if (left + width > rect.right) { - left = rect.right - width; + if (x + width > rect.right) { + x = rect.right - width; } - return { top: 0, left: left }; + return { top: 0, left: x }; }, }, transition: { diff --git a/yarn.lock b/yarn.lock index 7f4440d..e72d0ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -592,7 +592,7 @@ resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA== -"@types/d3-selection@*", "@types/d3-selection@^3.0.4": +"@types/d3-selection@*", "@types/d3-selection@^3.0.5": version "3.0.5" resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.5.tgz#27cd53b7672d405025e2414d98532d7934c16ebd" integrity sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w== @@ -1393,12 +1393,12 @@ big.js@^5.2.2: resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== -billboard.js@3.7.4: - version "3.7.4" - resolved "https://registry.yarnpkg.com/billboard.js/-/billboard.js-3.7.4.tgz#94181655168a8e44025279894e9442c97d1e7965" - integrity sha512-FFmmiiJCPdwE4OKE8L0XttP94ESOBqEvSQZDx+vA/LyK2pmvP8P/oU5perFS14lBTEojunuurvHAaVN1S9i1wA== +billboard.js@3.8.0-next.2: + version "3.8.0-next.2" + resolved "https://registry.yarnpkg.com/billboard.js/-/billboard.js-3.8.0-next.2.tgz#8bfde14c67f8133cb12c55ea90e892bcf392f3eb" + integrity sha512-jJeCjpWb5ylSpXVOOhuRXA+D6AOt3iGpuhS42O5ksjkSeS9HuH0PgqDzyexNEww9pilUjkXwSuIokHva5yJJ/g== dependencies: - "@types/d3-selection" "^3.0.4" + "@types/d3-selection" "^3.0.5" "@types/d3-transition" "^3.0.3" d3-axis "^3.0.0" d3-brush "^3.0.0"