Browse Source

xptracker: Show total xp/ranks only when 'overall' is selected

Signed-off-by: Tomas Slusny <slusnucky@gmail.com>
pull/265/head
Tomas Slusny 1 month ago
parent
commit
dbf1a7a734
2 changed files with 57 additions and 48 deletions
  1. 1
    1
      .babelrc
  2. 56
    47
      src/routes/xp-show.js

+ 1
- 1
.babelrc View File

@@ -1,6 +1,6 @@
{
"presets": ["react-app"],
"plugins": [
["@babel/transform-react-jsx", { "pragma": "h", "useBuiltIns": true }]
["@babel/transform-react-jsx", { "pragma": "h", "useBuiltIns": true, "pragmaFrag": "Fragment" }]
]
}

+ 56
- 47
src/routes/xp-show.js View File

@@ -1,4 +1,4 @@
import { h } from 'preact'
import { h, Fragment } from 'preact'
import { connect } from 'react-redux'
import { Link } from 'preact-router'
import { bindActionCreators } from 'redux'
@@ -67,6 +67,56 @@ const createDateRange = (start, end) => {
}
}

const OverallXp = ({ skill, skillNames, collectedXp }) =>
skill === 'overall' && (
<Fragment>
<h5>
<small>Total experience gained</small>
</h5>
<ResponsiveContainer height={300}>
<BarChart
data={skillNames
.filter(skill => skill !== 'overall')
.map(skill => ({
name: skill.toTitleCase(),
value: collectedXp[skill] ? collectedXp[skill].xp : 0
}))}
>
<XAxis dataKey="name" />
<YAxis hide />
<Tooltip />
<Bar dataKey="value">
{skillNames
.filter(skill => skill !== 'overall')
.map(skill => (
<Cell fill={skills[skill]} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>
<h5>
<small>Total ranks gained</small>
</h5>
<ResponsiveContainer height={300}>
<BarChart
data={skillNames.map(skill => ({
name: skill.toTitleCase(),
value: collectedXp[skill] ? collectedXp[skill].rank : 0
}))}
>
<XAxis dataKey="name" />
<YAxis hide />
<Tooltip />
<Bar dataKey="value">
{skillNames.map(skill => (
<Cell fill={skills[skill]} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>
</Fragment>
)

const XpShow = ({ name, skill, xp, collectedXp, start, end }) => {
skill = skill.toLowerCase()

@@ -122,52 +172,11 @@ const XpShow = ({ name, skill, xp, collectedXp, start, end }) => {
</ul>
</div>
<div class="col-xl-8 col-md-8 col-sm-12 col-xs-12">
<h5>
<small>Total experience gained</small>
</h5>
<ResponsiveContainer height={300}>
<BarChart
data={skillNames
.filter(skill => skill !== 'overall')
.map(skill => ({
name: skill.toTitleCase(),
value: collectedXp[skill] ? collectedXp[skill].xp : 0
}))}
>
<XAxis dataKey="name" />
<YAxis hide />
<Tooltip />
<Bar dataKey="value">
{skillNames
.filter(skill => skill !== 'overall')
.map(skill => (
<Cell fill={skills[skill]} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>

<h5>
<small>Total ranks gained</small>
</h5>
<ResponsiveContainer height={300}>
<BarChart
data={skillNames.map(skill => ({
name: skill.toTitleCase(),
value: collectedXp[skill] ? collectedXp[skill].rank : 0
}))}
>
<XAxis dataKey="name" />
<YAxis hide />
<Tooltip />
<Bar dataKey="value">
{skillNames.map(skill => (
<Cell fill={skills[skill]} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>

<OverallXp
skill={skill}
skillNames={skillNames}
collectedXp={collectedXp}
/>
<h5>
<small>{skill.toTitleCase()} ranks</small>
</h5>

Loading…
Cancel
Save