From c62d8189e5d03f68eae1c1fa4458944dd5523fe1 Mon Sep 17 00:00:00 2001 From: Kayla Glick <12898988+kayla-glick@users.noreply.github.com> Date: Tue, 27 Feb 2024 20:32:05 -0500 Subject: [PATCH] fix dps histogram + port over EP display changes (#4227) --- .../components/detailed_results/timeline.tsx | 40 +- ui/core/components/gear_picker.tsx | 51 +- ui/scss/core/components/_gear_picker.scss | 451 +++++++++--------- .../detailed_results/_timeline.scss | 2 + ui/scss/sims/raid/_blessings_picker.scss | 3 +- 5 files changed, 284 insertions(+), 263 deletions(-) diff --git a/ui/core/components/detailed_results/timeline.tsx b/ui/core/components/detailed_results/timeline.tsx index 866cd4292e..a78babc3e0 100644 --- a/ui/core/components/detailed_results/timeline.tsx +++ b/ui/core/components/detailed_results/timeline.tsx @@ -112,7 +112,6 @@ export class Timeline extends ResultComponent { title: { text: 'Time (s)', }, - type: 'datetime', }, noData: { text: 'Waiting for data...', @@ -174,16 +173,12 @@ export class Timeline extends ResultComponent { series: [], colors: [], xaxis: { - min: this.toDatetime(0).getTime(), - max: this.toDatetime(duration).getTime(), - type: 'datetime', + min: 0, + max: duration, tickAmount: 10, decimalsInFloat: 1, labels: { show: true, - formatter: (defaultValue: string, timestamp: number) => { - return (timestamp / 1000).toFixed(1); - }, }, title: { text: 'Time (s)', @@ -195,12 +190,15 @@ export class Timeline extends ResultComponent { beforeResetZoom: () => { return { xaxis: { - min: this.toDatetime(0), - max: this.toDatetime(duration), + min: 0, + max: duration, }, }; }, }, + toolbar: { + show: false, + }, }, }; @@ -337,7 +335,7 @@ export class Timeline extends ResultComponent { // Returns a function for drawing the tooltip, or null if no series was added. private addDpsSeries(unit: UnitMetrics, options: any, colorOverride: string): { maxDps: number, tooltipHandler: TooltipHandler } { - const dpsLogs = unit.dpsLogs; + const dpsLogs = unit.dpsLogs.filter(log => log.timestamp >= 0); options.colors.push(colorOverride || dpsColor); options.series.push({ @@ -345,7 +343,7 @@ export class Timeline extends ResultComponent { type: 'line', data: dpsLogs.map(log => { return { - x: this.toDatetime(log.timestamp), + x: log.timestamp, y: log.dps, }; }), @@ -362,7 +360,7 @@ export class Timeline extends ResultComponent { // Returns a function for drawing the tooltip, or null if no series was added. private addManaSeries(unit: UnitMetrics, options: any): TooltipHandler | null { - const manaLogs = unit.groupedResourceLogs[ResourceType.ResourceTypeMana]; + const manaLogs = unit.groupedResourceLogs[ResourceType.ResourceTypeMana].filter(log => log.timestamp >= 0); if (manaLogs.length == 0) { return null; } @@ -374,7 +372,7 @@ export class Timeline extends ResultComponent { type: 'line', data: manaLogs.map(log => { return { - x: this.toDatetime(log.timestamp), + x: log.timestamp, y: log.valueAfter, }; }), @@ -422,9 +420,9 @@ export class Timeline extends ResultComponent { options.series.push({ name: 'Threat', type: 'line', - data: unit.threatLogs.map(log => { + data: unit.threatLogs.filter(log => log.timestamp >= 0).map(log => { return { - x: this.toDatetime(log.timestamp), + x: log.timestamp, y: log.threatAfter, }; }), @@ -454,14 +452,14 @@ export class Timeline extends ResultComponent { position: 'back', xaxis: mcdAuraLogs.map((log, i) => { return { - x: this.toDatetime(log.gainedAt).getTime(), - x2: this.toDatetime(log.fadedAt).getTime(), + x: log.gainedAt, + x2: log.fadedAt, fillColor: mcdAuraColors[i], }; }), points: mcdLogs.map((log, i) => { return { - x: this.toDatetime(log.timestamp).getTime(), + x: log.timestamp, y: 0, image: { path: log.actionId!.iconUrl, @@ -1039,7 +1037,7 @@ export class Timeline extends ResultComponent {
  • {log.actionId && log.actionId.iconUrl && } {log.actionId && {log.actionId.name}} - {value} + {htmlDecode(value)}
    • ); } @@ -1082,10 +1080,6 @@ export class Timeline extends ResultComponent { this.updatePlot(); }, 300); } - - private toDatetime(timestamp: number): Date { - return new Date(timestamp * 1000); - } } const MELEE_ACTION_CATEGORY = 1; diff --git a/ui/core/components/gear_picker.tsx b/ui/core/components/gear_picker.tsx index c61deb3ba3..0019807f59 100644 --- a/ui/core/components/gear_picker.tsx +++ b/ui/core/components/gear_picker.tsx @@ -122,7 +122,7 @@ export class ItemRenderer extends Component { readonly socketsContainerElem: HTMLElement; constructor(parent: HTMLElement, player: Player) { - super(parent, 'item-renderer-root'); + super(parent, 'item-picker-root'); this.player = player; let iconElem = ref(); @@ -825,9 +825,10 @@ export class ItemList {
    - -
      @@ -980,7 +982,9 @@ export class ItemList { epDeltaElem.textContent = ''; if (itemData.item) { const listItemEP = this.computeEP(itemData.item); - formatDeltaTextElem(epDeltaElem, newEP, listItemEP, 0); + if (newEP != listItemEP) { + formatDeltaTextElem(epDeltaElem, newEP, listItemEP, 0); + } } } }); @@ -1067,7 +1071,7 @@ export class ItemList { } public hideOrShowEPValues() { - const labels = this.tabContent.getElementsByClassName("ep-delta-label") + const labels = this.tabContent.getElementsByClassName("ep-label") const container = this.tabContent.getElementsByClassName("selector-modal-list") const show = this.player.sim.getShowEPValues(); const display = show ? "" : "none" @@ -1088,14 +1092,15 @@ export class ItemList { const itemData = item.data; const itemEP = this.computeEP(itemData.item); - const equipedItem = this.equippedToItemFn(this.gearData.getEquippedItem()); - const equipdItemId = equipedItem ? (this.label == 'Enchants' ? (equipedItem as unknown as Enchant).effectId : (equipedItem as unknown as Item | Gem).id) : 0; + const equippedItem = this.equippedToItemFn(this.gearData.getEquippedItem()); + const equippedItemID = equippedItem ? (this.label == 'Enchants' ? (equippedItem as unknown as Enchant).effectId : (equippedItem as unknown as Item).id) : 0; + const equippedItemEP = equippedItem ? this.computeEP(equippedItem) : 0 const nameElem = ref(); const anchorElem = ref(); const iconElem = ref(); const listItemElem = ( -
    • +
    • ); } + const favoriteElem = ref(); listItemElem.appendChild( -
      - itemData.item && formatDeltaTextElem(e, equipedItem ? this.computeEP(equipedItem) : 0, itemEP, 0)}> +
      +
      - ); + ) anchorElem.value!.addEventListener('click', (event: Event) => { event.preventDefault(); diff --git a/ui/scss/core/components/_gear_picker.scss b/ui/scss/core/components/_gear_picker.scss index f6f24ec911..2924c405a2 100644 --- a/ui/scss/core/components/_gear_picker.scss +++ b/ui/scss/core/components/_gear_picker.scss @@ -2,188 +2,185 @@ @import "./filters_menu"; -.gear-picker-root { - margin-bottom: var(--container-padding); - display: flex; - flex-wrap: wrap; - - .gear-picker-left, - .gear-picker-right { - width: 50%; - } - - .item-picker-root { - display: flex; - - &:not(:last-child) { - margin-bottom: $block-spacer; - } - - .item-renderer-root { - width: 100%; - display: flex; - } - - .item-picker-icon { - @include wowhead-background-icon; - width: 4rem; - height: 4rem; - border: $border-default; - } - } - - .gear-picker-left { - .item-picker-root { - // Add space to separate weapon categories - &:nth-child(6) { - margin-bottom: var(--container-padding); - } - - .item-renderer-root { - flex-direction: row; - text-align: left; - } - } - } +$source-cell-width: 16rem; +$ep-cell-width: 4rem; +$favorite-cell-width: 2rem; - .gear-picker-right { - .item-renderer-root { - flex-direction: row-reverse; - text-align: right; - } - } +.gear-picker-root { + display: flex; + flex-wrap: wrap; + width: 100%; + + .gear-picker-left, + .gear-picker-right { + width: 50%; + } + + .item-picker-root { + display: flex; + + &:not(:last-child) { + margin-bottom: $block-spacer; + } + + .item-picker-icon { + @include wowhead-background-icon; + width: 4rem; + height: 4rem; + border: $border-default; + } + } + + .gear-picker-left { + .item-picker-root { + flex-direction: row; + text-align: left; + + // Add space to separate weapon categories + &:nth-child(6) { + margin-bottom: map.get($spacers, 5); + } + } + } + + .gear-picker-right { + .item-picker-root { + flex-direction: row-reverse; + text-align: right; + } + } } .item-picker-sockets-container { - @include vertical-bottom; - @include horizontal-center; - width: 100%; - display: flex; - justify-content: center; + @include vertical-bottom; + @include horizontal-center; + width: 100%; + display: flex; + justify-content: center; } .selector-modal { - .modal-header { - padding-bottom: 0; - - .selector-modal-tabs { - border-bottom: 0; - - .selector-modal-tab-gem { - height: 100%; - padding: 0; - padding: calc(var(--bs-nav-link-padding-y) / 2) calc(var(--bs-nav-link-padding-x) / 2); - margin-left: calc(var(--bs-nav-link-padding-x) / 2); - margin-right: calc(var(--bs-nav-link-padding-x) / -2); - display: flex; - align-items: center; - opacity: .7; - transition: opacity .15s ease-in-out; - - &:hover, &.active { - opacity: 1; - } - - .gem-socket-container { - --gem-width: 2rem; - } - } - } - } + .modal-header { + padding-bottom: 0; + + .selector-modal-tabs { + border-bottom: 0; + + .selector-modal-tab-gem { + height: 100%; + padding: 0; + padding: calc(var(--bs-nav-link-padding-y) / 2) calc(var(--bs-nav-link-padding-x) / 2); + margin-left: calc(var(--bs-nav-link-padding-x) / 2); + margin-right: calc(var(--bs-nav-link-padding-x) / -2); + display: flex; + align-items: center; + opacity: .7; + transition: opacity .15s ease-in-out; + + &:hover, &.active { + opacity: 1; + } + + .gem-socket-container { + --gem-width: 2rem; + } + } + } + } } @include media-breakpoint-down(md) { - .gear-picker-root { - flex-direction: column; - - .gear-picker-left, - .gear-picker-right { - width: 100%; - margin-right: 0; - } - } + .gear-picker-root { + flex-direction: column; + + .gear-picker-left, + .gear-picker-right { + width: 100%; + margin-right: 0; + } + } } .item-picker-labels-container { - padding: map-get($spacers, 2); - flex: 1; - - .item-picker-name { - color: white; - font-size: map-get($font-sizes, 6); - letter-spacing: normal; - } - - .item-picker-enchant { - color: $item-quality-uncommon; - font-size: $content-font-size; - letter-spacing: normal; - } + padding: map-get($spacers, 2); + flex: 1; + + .item-picker-name { + color: white; + font-size: map-get($font-sizes, 6); + letter-spacing: normal; + } + + .item-picker-enchant { + color: $item-quality-uncommon; + font-size: $content-font-size; + letter-spacing: normal; + } } @include media-breakpoint-down(xl) { - .gear-picker-root { - .gear-picker-left { - .item-picker-root { - // Increase the spacing to help separate the weapons/bonus item slots - &:nth-child(6) { - margin-bottom: calc(var(--container-padding) * 2); - } - } - } - } + .gear-picker-root { + .gear-picker-left { + .item-picker-root { + // Increase the spacing to help separate the weapons/bonus item slots + &:nth-child(6) { + margin-bottom: calc(var(--container-padding) * 2); + } + } + } + } } @include media-breakpoint-down(md) { - .gear-picker-root { - .gear-picker-left { - .item-picker-root { - // Increase the spacing to help separate the weapons/bonus item slots - &:last-child { - margin-bottom: calc(var(--container-padding) * 2); - } - } - } - } + .gear-picker-root { + .gear-picker-left { + .item-picker-root { + // Increase the spacing to help separate the weapons/bonus item slots + &:last-child { + margin-bottom: calc(var(--container-padding) * 2); + } + } + } + } } .item-picker-labels-container { - padding: map-get($spacers, 2); - flex: 1; - - .item-picker-name { - color: white; - font-size: map-get($font-sizes, 6); - letter-spacing: normal; - } - - .item-picker-enchant { - color: $item-quality-uncommon; - font-size: $content-font-size; - letter-spacing: normal; - } + padding: map-get($spacers, 2); + flex: 1; + + .item-picker-name { + color: white; + font-size: map-get($font-sizes, 6); + letter-spacing: normal; + } + + .item-picker-enchant { + color: $item-quality-uncommon; + font-size: $content-font-size; + letter-spacing: normal; + } } .selector-modal-tab-content { - .selector-modal-tab-pane { - padding: 0; - - .selector-modal-filters { - margin-bottom: map-get($spacers, 3); - display: flex; - align-items: center; - - &> *:not(:last-child) { - margin-right: map-get($spacers, 2); - } - - input, select { - padding-top: $btn-padding-y; - padding-bottom: $btn-padding-y; - font-size: $btn-font-size; - } - } - } + .selector-modal-tab-pane { + padding: 0; + + .selector-modal-filters { + margin-bottom: map.get($spacers, 4); + display: flex; + align-items: center; + + &> *:not(:last-child) { + margin-right: map-get($spacers, 2); + } + + input, select { + padding-top: $btn-padding-y; + padding-bottom: $btn-padding-y; + font-size: $btn-font-size; + } + } + } } .selector-modal-search { @@ -194,7 +191,7 @@ min-width: 7rem; .phase-selector { - margin-bottom: 0; + margin-bottom: 0; } } @@ -203,29 +200,52 @@ } .selector-modal-list-labels { - margin-bottom: map-get($spacers, 2); - font-size: 1.125rem; - - .ep-delta-label { - display: flex; - align-items: center; - float: right; - } + display: flex; + padding-right: map-get($spacers, 2); + margin-right: map-get($spacers, 3); + margin-bottom: map-get($spacers, 2); + font-size: 1.125rem; + + label { + font-weight: normal; + } + + .item-label { + flex: 1; + } + + .source-label { + width: $source-cell-width; + margin-left: map-get($spacers, 3); + } + + .ep-label { + width: $ep-cell-width; + margin-left: map-get($spacers, 3); + display: flex; + align-items: center; + float: right; + } + + .favorite-label { + width: $favorite-cell-width; + margin-left: map-get($spacers, 3); + } } .selector-modal-list { - width: 100%; - max-height: 70vh; + width: 100%; + max-height: 65vh; overflow-y: auto; overflow-x: hidden; - padding: 0; - margin-bottom: 0; - - &.hide-ep { - .selector-modal-list-item-ep { - display:none; - } - } + padding: 0; + margin-bottom: 0; + + &.hide-ep { + .selector-modal-list-item-ep { + display:none; + } + } } // TODO: Move all of these to a shared file, as they're used in other places too @@ -236,58 +256,58 @@ background-color: #111218; &:nth-child(2n) { - background: $table-row-even-bg; + background: $table-row-even-bg; } &:nth-child(2n+1) { - background: $table-row-odd-bg; + background: $table-row-odd-bg; } &:hover { - background: #333; + background: #333; } &.active { - .selector-modal-list-item-icon { - outline: 2px solid $success; - } + .selector-modal-list-item-icon { + outline: 2px solid $success; + } } .selector-modal-list-item-link { - display: flex; - align-items: center; + display: flex; + align-items: center; } - + .selector-modal-list-label-cell { - flex: 1; - display: flex; - align-items: center; + flex: 1; + display: flex; + align-items: center; } .selector-modal-list-item-icon { - @include wowhead-background-icon; - width: 3rem; - height: 3rem; - border: $border-default; + @include wowhead-background-icon; + width: 3rem; + height: 3rem; + border: $border-default; } - + .selector-modal-list-item-name { - font-size: 1.125rem; - margin-left: map-get($spacers, 3); - letter-spacing: normal; - font-weight: normal; - cursor: pointer; + font-size: 1.125rem; + margin-left: map-get($spacers, 3); + letter-spacing: normal; + font-weight: normal; + cursor: pointer; } } .selector-modal-list-item-source-container { margin-left: map-get($spacers, 3); - width: 12rem; + width: $source-cell-width; } .selector-modal-list-item-favorite { margin-left: map-get($spacers, 3); - color: yellow; + color: $brand; } .selector-modal-list-item-favorite:hover { @@ -297,26 +317,31 @@ } .selector-modal-list-item-ep { + width: $ep-cell-width; + margin-left: map-get($spacers, 3); display: flex; - font-size: 1rem; - font-weight: 800; -} - -.selector-modal-list-item-ep > span { - min-width: 3rem; - display: inline-block; - color: white; - text-align: right; -} + align-items: center; + + &> span { + display: inline-block; + color: white; + text-align: right; + } + + .selector-modal-list-item-ep-delta { + margin-left: map-get($spacers, 1); + font-size: .8rem; + } + } .heroic-label { margin-left: map-get($spacers, 1); - color: $item-quality-uncommon; + color: $item-quality-uncommon; } @include media-breakpoint-down(lg) { .item-picker-icon { - width: 3rem; - height: 3rem; + width: 3rem; + height: 3rem; } } diff --git a/ui/scss/core/components/detailed_results/_timeline.scss b/ui/scss/core/components/detailed_results/_timeline.scss index b2456884d2..ef57095ad6 100644 --- a/ui/scss/core/components/detailed_results/_timeline.scss +++ b/ui/scss/core/components/detailed_results/_timeline.scss @@ -68,6 +68,8 @@ $threat-color: #b56d07; .timeline-tooltip { text-align: start; + background: $tooltip-bg; + padding: $tooltip-padding-y $tooltip-padding-x; } .timeline-tooltip-header { diff --git a/ui/scss/sims/raid/_blessings_picker.scss b/ui/scss/sims/raid/_blessings_picker.scss index 873a3f2afc..cc6e0ce33f 100644 --- a/ui/scss/sims/raid/_blessings_picker.scss +++ b/ui/scss/sims/raid/_blessings_picker.scss @@ -13,8 +13,7 @@ margin-right: $block-spacer * 2; .blessings-spec-icon { - width: $icon-size-md; - height: $icon-size-md; + @extend .icon-md; } }