Skip to content

Commit

Permalink
fix dps histogram + port over EP display changes (#4227)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kayla-glick
kayla-glick committed Feb 28, 2024
1 parent 587fad4 commit c62d818
Show file tree
Hide file tree
Showing 5 changed files with 284 additions and 263 deletions.
40 changes: 17 additions & 23 deletions ui/core/components/detailed_results/timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ export class Timeline extends ResultComponent {
title: {
text: 'Time (s)',
},
type: 'datetime',
},
noData: {
text: 'Waiting for data...',
Expand Down Expand Up @@ -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)',
Expand All @@ -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,
},
},
};

Expand Down Expand Up @@ -337,15 +335,15 @@ 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({
name: 'DPS',
type: 'line',
data: dpsLogs.map(log => {
return {
x: this.toDatetime(log.timestamp),
x: log.timestamp,
y: log.dps,
};
}),
Expand All @@ -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;
}
Expand All @@ -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,
};
}),
Expand Down Expand Up @@ -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,
};
}),
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -1039,7 +1037,7 @@ export class Timeline extends ResultComponent {
<li>
{log.actionId && log.actionId.iconUrl && <img className="timeline-tooltip-icon" src={log.actionId.iconUrl}></img>}
{log.actionId && <span>{log.actionId.name}</span>}
<span className="series-color">{value}</span>
<span className="series-color">{htmlDecode(value)}</span>
</li>
);
}
Expand Down Expand Up @@ -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;
Expand Down
51 changes: 26 additions & 25 deletions ui/core/components/gear_picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export class ItemRenderer extends Component {
readonly socketsContainerElem: HTMLElement;

constructor(parent: HTMLElement, player: Player<any>) {
super(parent, 'item-renderer-root');
super(parent, 'item-picker-root');
this.player = player;

let iconElem = ref<HTMLAnchorElement>();
Expand Down Expand Up @@ -825,16 +825,18 @@ export class ItemList<T> {
<button className="selector-modal-remove-button btn btn-danger">Unequip Item</button>
</div>
<div className="selector-modal-list-labels">
<label>Item</label>
<label className="ep-delta-label">
EP
<label className="item-label"><small>Item</small></label>
<label className="source-label"><small>Source</small></label>
<label className="ep-label">
<small>EP</small>
<i className="fa-solid fa-plus-minus fa-2xs"></i>
<button
ref={epButton}
className="btn btn-link p-0 ms-1">
<i className="far fa-question-circle fa-lg"></i>
</button>
</label>
<label className="favorite-label"></label>
</div>
<ul className="selector-modal-list"></ul>
</div>
Expand Down Expand Up @@ -980,7 +982,9 @@ export class ItemList<T> {
epDeltaElem.textContent = '';
if (itemData.item) {
const listItemEP = this.computeEP(itemData.item);
formatDeltaTextElem(epDeltaElem, newEP, listItemEP, 0);
if (newEP != listItemEP) {
formatDeltaTextElem(epDeltaElem, newEP, listItemEP, 0);
}
}
}
});
Expand Down Expand Up @@ -1067,7 +1071,7 @@ export class ItemList<T> {
}

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"
Expand All @@ -1088,14 +1092,15 @@ export class ItemList<T> {
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<HTMLLabelElement>();
const anchorElem = ref<HTMLAnchorElement>();
const iconElem = ref<HTMLImageElement>();
const listItemElem = (
<li className={`selector-modal-list-item ${equipdItemId == itemData.id ? 'active' : ''}`} dataset={{idx: item.idx.toString()}}>
<li className={`selector-modal-list-item ${equippedItemID == itemData.id ? 'active' : ''}`} dataset={{idx: item.idx.toString()}}>
<div className='selector-modal-list-label-cell'>
<a className='selector-modal-list-item-link' ref={anchorElem} dataset={{whtticon:'false'}}>
<img className='selector-modal-list-item-icon' ref={iconElem}></img>
Expand All @@ -1116,35 +1121,31 @@ export class ItemList<T> {
)
}

let favoriteElem = ref<HTMLButtonElement>();

listItemElem.appendChild(
<div>
<button className="selector-modal-list-item-favorite btn btn-link p-0"
ref={favoriteElem}
onclick={() => setFavorite(listItemElem.dataset.fav == 'false')}>
<i className='fa-star fa-xl'></i>
</button>
</div>
)


if (this.slot != ItemSlot.ItemSlotTrinket1 && this.slot != ItemSlot.ItemSlotTrinket2) {
listItemElem.appendChild(
<div className='selector-modal-list-item-ep'>
<span className='selector-modal-list-item-ep-value'>
{itemEP < 9.95 ? itemEP.toFixed(1).toString() : Math.round(itemEP).toString()}
</span>
<span
className='selector-modal-list-item-ep-delta'
ref={e => itemData.item && equippedItemEP != itemEP && formatDeltaTextElem(e, equippedItemEP, itemEP, 0)}
></span>
</div>
);
}

const favoriteElem = ref<HTMLButtonElement>();
listItemElem.appendChild(
<div className='selector-modal-list-item-ep'>
<span className='selector-modal-list-item-ep-delta'
ref={(e) => itemData.item && formatDeltaTextElem(e, equipedItem ? this.computeEP(equipedItem) : 0, itemEP, 0)}></span>
<div>
<button className="selector-modal-list-item-favorite btn btn-link p-0"
ref={favoriteElem}
onclick={() => setFavorite(listItemElem.dataset.fav == 'false')}>
<i className='fa-star fa-xl'></i>
</button>
</div>
);
)

anchorElem.value!.addEventListener('click', (event: Event) => {
event.preventDefault();
Expand Down
Loading

0 comments on commit c62d818

Please sign in to comment.