Dpsgraph

package.json

@@ -24,6 +24,8 @@
     "lodash": "^4.17.21",
     "meter-core": "github:lost-ark-dev/meter-core",
     "platform-folders": "^0.6.0",
+    "echarts": "^5.3.3",
+    "vue-echarts": "^6.0.3",
     "worker-farm": "^1.7.0"
   },
   "devDependencies": {

src-electron/util/app-settings.ts

@@ -309,6 +309,10 @@ const defaultSettings: Settings = {
         name: "Skill View / Casts per Minute",
         enabled: false,
       },
+      dpsGraph: {
+        name: "DPS Graph",
+        enabled: true,
+      },
     },
     buffFilter: {
       party:

src/components/DamageMeter/DPSGraph.vue

@@ -0,0 +1,194 @@
+<template>
+  <v-chart
+    class="dps-chart"
+    :option="data"
+    auto-resize
+    :init-options="initOptions"
+    theme="loa"
+  />
+</template>
+
+<script setup lang="ts">
+import { registerTheme, use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { LineChart } from "echarts/charts";
+import {
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  MarkPointComponent,
+  DataZoomComponent, ToolboxComponent
+} from "echarts/components";
+import { onMounted, PropType, ref, watch } from "vue";
+import { EChartsOption, SeriesOption } from "echarts";
+import VChart from "vue-echarts";
+import { Entity, Game } from "loa-details-log-parser/data";
+import { EntityExtended, getPlayerName } from "src/util/helpers";
+import { useSettingsStore } from "stores/settings";
+import { theme } from "components/DamageMeter/theme";
+import PCData from "app/meter-data/databases/PCData.json";
+import { millisToMinutesAndSeconds } from "src/util/number-helpers";
+
+registerTheme("loa", theme);
+use([
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  MarkPointComponent,
+  ToolboxComponent,
+  DataZoomComponent
+]);
+const props = defineProps({
+  sessionState: { type: Object as PropType<Game>, required: true },
+  nameDisplay: {
+    type: String,
+    default: "name+class",
+  },
+});
+const settingsStore = useSettingsStore();
+
+let entitiesCopy: EntityExtended[] = [];
+
+
+const data = ref<EChartsOption>({});
+const initOptions = ref({ renderer: "canvas" });
+watch(props, () => prepare());
+onMounted(() => prepare());
+
+function generateIntervals(start: number, end: number, intervalCount: number) {
+  if (!start || !end) return [];
+  const duration = end - start;
+  const intervals: number[] = [];
+  const intervalLength = duration / intervalCount;
+  for (let i = 0; i < intervalCount; i++) {
+    intervals.push(i * intervalLength);
+  }
+  return intervals;
+}
+
+function getDamage(start: number, end: number, entity: Entity) {
+  const skills = Array.from(entity.skills.values());
+  const damage = skills.reduce((acc, skill) => {
+    const entries = skill.breakdown.filter(d => d.timestamp >= start && d.timestamp <= end);
+    return acc + entries.reduce((acc, d) => acc + d.damage, 0);
+  }, 0);
+  if (!damage || isNaN(damage)) {
+    return 0;
+  }
+  return damage / (end-start) * 1000;
+}
+
+function prepare() {
+  const legend: string[] = [];
+  const series: SeriesOption[] = [];
+  const start = props.sessionState?.fightStartedOn ?? 0;
+  const intervals = generateIntervals(start, props.sessionState?.lastCombatPacket??0, 100);
+  const windowSize = intervals[1]*2
+  entitiesCopy = Array.from(props.sessionState?.entities.values()).filter(e => e.isPlayer && e.damageDealt > 0);
+  entitiesCopy.sort((a, b) => a.damageDealt - b.damageDealt);
+  entitiesCopy.forEach(e => {
+    const markPoints: any[] = []
+    const playerName = getPlayerName(e, props.nameDisplay);
+    legend.push(playerName);
+    const data: string[] = [];
+    let last = start
+    intervals.forEach((i, index) => {
+      const dps = getDamage(start + i - windowSize, start + i + windowSize, e);
+
+      data.push(dps.toFixed(0));
+      if( e.deaths>0 && last<=e.deathTime && e.deathTime<=start+i ) {
+        markPoints.push({
+          name: "Death",
+          value: "💀",
+          coord: [index, dps],
+        })
+      }
+      last = start+i
+    });
+
+    series.push({
+      name: playerName,
+      type: "line",
+      color: settingsStore.getClassColor(e.class),
+      markPoint:{data: markPoints},
+      data
+    });
+  });
+  data.value = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        label: {
+          backgroundColor: "#6a7985"
+        }
+      }
+    },
+    legend: {
+      data: legend,
+      top: 25,
+      type: "scroll"
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true
+
+    },
+
+    xAxis: [{
+      type: "category",
+      data: intervals.map(i => millisToMinutesAndSeconds(i)),
+      boundaryGap: false
+    }],
+    aria: {
+      enabled: true,
+      decal: {
+        show: true
+      }
+    },
+    yAxis: [
+      {
+        type: "value"
+      }
+    ],
+    series,
+    toolbox: {
+      left: "center",
+      itemSize: 25,
+      top: 55,
+      feature: {
+        dataZoom: {
+          yAxisIndex: "none"
+        },
+        restore: {}
+      }
+    },
+    dataZoom: [
+      {
+        type: "inside", throttle: 50
+      }
+    ],
+  };
+}
+
+function getClassImage(classId: number) {
+  if (classId in PCData)
+    return new URL(
+      `../../assets/images/classes/${classId}.png`,
+      import.meta.url
+    ).href;
+
+  return new URL("../../assets/images/classes/101.png", import.meta.url).href;
+}
+</script>
+<style scoped>
+.dps-chart {
+  min-height: 300px !important;
+}
+</style>

src/components/DamageMeter/DamageMeterTable.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="damage-meter-table-wrapper" :style="wrapperStyle">
+    <template
+      v-if="damageType==='dps_graph'"
+    >
+      <DPSGraph
+        :session-state="sessionState"
+        :name-display="nameDisplay"
+      />
+    </template>
+    <template
+      v-else
+    >
     <table class="damage-meter-table">
       <thead>
         <q-menu touch-position context-menu>
@@ -588,6 +599,7 @@
         />
       </tbody>
     </table>
+    </template>
   </div>
 </template>
 
@@ -623,6 +635,7 @@ import {
   EntitySkillsExtended,
   tabNames,
 } from "../../util/helpers";
+import DPSGraph from "components/DamageMeter/DPSGraph.vue";
 
 const settingsStore = useSettingsStore();
 

src/components/DamageMeter/TableEntry.vue

@@ -214,7 +214,7 @@
         </td>
       </template>
     </template>
-    <!--  
+    <!--
     <template v-else-if="['buff_dmg', 'buff_hit'].includes(damageType)">
       <template
         v-if="
@@ -341,7 +341,7 @@ import { abbreviateNumber } from "src/util/number-helpers";
 import { useSettingsStore } from "src/stores/settings";
 import { Game, StatusEffect } from "loa-details-log-parser/data";
 import BuffTableBodyEntry from "./BuffTableBodyEntry.vue";
-import { EntityExtended, getBuffPercent } from "../../util/helpers";
+import { EntityExtended, getBuffPercent, getPlayerName } from "../../util/helpers";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
 import PCData from "/meter-data/databases/PCData.json";
@@ -357,48 +357,7 @@ const props = defineProps({
   sessionState: { type: Object as PropType<Game>, required: true },
 });
 
-const entryName = computed(() => {
-  let res = "";
-  if (!props.player) return res;
-  if (props.player.isDead) {
-    res += "💀 ";
-  }
-
-  let hasName = false;
-  if (props.nameDisplay.includes("name")) {
-    hasName = true;
-    res += props.player.name + " ";
-  }
-
-  if (
-    props.nameDisplay.includes("gear") ||
-    props.nameDisplay.includes("class")
-  ) {
-    if (hasName) res += "(";
-
-    let hasGearScore = false;
-    if (
-      props.nameDisplay.includes("gear") &&
-      props.player.gearScore &&
-      props.player.gearScore != 0
-    ) {
-      res += props.player.gearScore;
-      hasGearScore = true;
-    }
-
-    if (props.nameDisplay.includes("class")) {
-      if (hasGearScore) {
-        res += " ";
-      }
-
-      res += props.player.class;
-    }
-
-    if (hasName) res += ")";
-  }
-
-  return res;
-});
+const entryName = computed(() => getPlayerName(props.player, props.nameDisplay))
 
 const abbreviatedDamage = computed(() => {
   if (!props.player) return "";