Updated number format and sorting for timeline (minmatarfleet#976)

* Updated number format and sorting for timeline * Added vertical lines for data points
beautifulmim · Dec 23, 2024 · 2df9f30 · 2df9f30
1 parent ddfff1a
commit 2df9f30
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 11 deletions.
diff --git a/frontend/app/src/components/blocks/AnalizeCombatLogButton.astro b/frontend/app/src/components/blocks/AnalizeCombatLogButton.astro
@@ -66,18 +66,15 @@ import TutorialIcon from '@components/icons/TutorialIcon.astro';
         combatlogfile: '',
         async update_status(combatlogfileinput) {
             let array_buffer = this.str2ab(this.combatlog)
-            console.log(this.combatlogfile)
 
             if (combatlogfileinput) {
-                console.log(combatlogfileinput)
                 const file = combatlogfileinput.files[0]
                 array_buffer = await file.arrayBuffer()
             }
 
             const compressed_data = pako.gzip(new Uint8Array(array_buffer))
             const b64encoded_string = btoa(String.fromCharCode.apply(null, compressed_data))
             this.gziped_combatlog = b64encoded_string
-            console.log(b64encoded_string)
         },
         str2ab(str) {
             const encoder = new TextEncoder()

diff --git a/frontend/app/src/components/blocks/CombatLogAnalysisComponent.astro b/frontend/app/src/components/blocks/CombatLogAnalysisComponent.astro
@@ -70,24 +70,24 @@ import RepairBadge from '@components/blocks/RepairBadge.astro';
                 {combat_log_analysis?.max_to &&
                     <TextGroup title={t('max_damage_inflicted')}>
                         <Flexblock gap='0' slot="outside">
-                            <span><b class="[ text-green ]">{combat_log_analysis?.max_to.damage}</b> - <small>{combat_log_analysis?.max_to.weapon} - {combat_log_analysis?.max_to.outcome}</small></span>
+                            <span><b class="[ text-green ]">{combat_log_analysis?.max_to.damage.toLocaleString()}</b> - <small>{combat_log_analysis?.max_to.weapon} - {combat_log_analysis?.max_to.outcome}</small></span>
                             <small>To {combat_log_analysis?.max_to.entity}</small>
                         </Flexblock>
                     </TextGroup>
                 }
                 {combat_log_analysis?.max_from &&
                     <TextGroup title={t('max_damage_received')}>
                         <Flexblock gap='0' slot="outside">
-                            <span><b class="[ text-red ]">{combat_log_analysis?.max_from.damage}</b> - <small>{combat_log_analysis?.max_from.weapon} - {combat_log_analysis?.max_from.outcome}</small></span>
+                            <span><b class="[ text-red ]">{combat_log_analysis?.max_from.damage.toLocaleString()}</b> - <small>{combat_log_analysis?.max_from.weapon} - {combat_log_analysis?.max_from.outcome}</small></span>
                             <small>From {combat_log_analysis?.max_from.entity}</small>
                         </Flexblock>
                     </TextGroup>
                 }
                 {combat_log_analysis.armor_repaired > 0 &&
-                    <TextGroup title={t('armor_repaired')}>{combat_log_analysis.armor_repaired}</TextGroup>
+                    <TextGroup title={t('armor_repaired')}>{combat_log_analysis.armor_repaired.toLocaleString()}</TextGroup>
                 }
                 {combat_log_analysis.shield_repaired > 0 &&
-                    <TextGroup title={t('shield_repaired')}>{combat_log_analysis.shield_repaired}</TextGroup>
+                    <TextGroup title={t('shield_repaired')}>{combat_log_analysis.shield_repaired.toLocaleString()}</TextGroup>
                 }
             </Grid>
         }
@@ -115,7 +115,7 @@ import RepairBadge from '@components/blocks/RepairBadge.astro';
         {(combat_log_analysis?.enemies?.length ?? 0) > 0 &&
             <ComponentBlock>
                 <Flexblock gap='var(--space-l)'>
-                    <h3>{t('enemies')}</h3>
+                    <h3>{t('damage_to_and_from')}</h3>
                     <Grid
                         class="[ component w-full grid-fill ]"
                         row_gap="var(--space-m)"
@@ -151,7 +151,7 @@ import RepairBadge from '@components/blocks/RepairBadge.astro';
         {(combat_log_analysis?.repairs?.length ?? 0) > 0 &&
             <ComponentBlock>
                 <Flexblock gap='var(--space-l)'>
-                    <h3>{t('repairs')}</h3>
+                    <h3>{t('repair_targets')}</h3>
                     <Grid
                         class="[ component w-full grid-fill ]"
                         row_gap="var(--space-m)"

diff --git a/frontend/app/src/components/blocks/CombatLogChart.astro b/frontend/app/src/components/blocks/CombatLogChart.astro
@@ -116,7 +116,35 @@ import MultiRangeInput from '@components/blocks/MultiRangeInput.astro';
                             display: false,
                         }
                     }
-                }
+                },
+                plugins: [{
+                    // Plugin to draw vertical lines
+                    id: 'verticalLines',
+                    beforeDraw: (chart) => {
+                        const ctx = chart.ctx
+                        const xScale = chart.scales.x
+                        const yScale = chart.scales.y
+
+                        ctx.save()
+
+                        chart.data.datasets.forEach(dataset => {
+                            dataset.data.forEach((value, index) => {
+                                const x = xScale.getPixelForValue(index)
+                                const y = yScale.getPixelForValue(value)
+
+                                // Draw a vertical line
+                                ctx.beginPath()
+                                ctx.moveTo(x, y)
+                                ctx.lineTo(x, yScale.getPixelForValue(0))
+                                ctx.strokeStyle = 'rgba(241, 217, 160, 0.25)'
+                                ctx.lineWidth = 1
+                                ctx.stroke()
+                            })
+                        })
+
+                        ctx.restore()
+                    }
+                }]
             })
 
             const set_axis_button = document.querySelector('.set-x-axis')

diff --git a/frontend/app/src/helpers/fetching/combatlog.ts b/frontend/app/src/helpers/fetching/combatlog.ts
@@ -25,6 +25,7 @@ export async function fetch_combatlog_by_id(access_token:string, log_id:number)
 }
 
 async function process_analysis(analysis:CombatLog) {
+    analysis.times = analysis.times.sort((a, b) => a.name.localeCompare(b.name))
     const start_time = analysis.times[0]?.name ?? analysis.start
     const end_time = analysis.times[analysis.times.length - 1]?.name ?? analysis.end
 
@@ -69,7 +70,6 @@ async function process_analysis(analysis:CombatLog) {
     const fleet_id = analysis?.fleet_id > 0 ? analysis?.fleet_id : null
     const repairs = await Promise.all(analysis.repairs.map(async repair => {
         const effective_reps = (repair.repairs_to * 100) / (repair.max_to * repair.cycles_to)
-        console.log(repair)
 
         return {
             name: repair.name,

diff --git a/frontend/app/src/i18n/ui.ts b/frontend/app/src/i18n/ui.ts
@@ -1233,5 +1233,7 @@ export const ui = {
         'unauthenticated_error': 'Authentication is required',
         'invalid_log_id': 'Log is not valid',
         'uknown_structure_type': 'Uknown structure type',
+        'repair_targets': 'Repair targets',
+        'damage_to_and_from': 'Damage to and from',
     },
 } as const;