diff --git a/app/components/stats/general/bodiesTab.tsx b/app/components/stats/general/bodiesTab.tsx index 80301b76..94e17a13 100644 --- a/app/components/stats/general/bodiesTab.tsx +++ b/app/components/stats/general/bodiesTab.tsx @@ -1,58 +1,48 @@ import React from 'react'; import { ServerOverview, ServerOverviewBodyGroup } from 'app/interfaces'; -import CollapsibleSection from 'app/components/stats/general/collapsibleSection'; +import StatRow from 'app/components/stats/general/statRow'; import * as util from 'app/util'; type Props = { data: ServerOverview['bodies']; }; -const bodyGroupRows = (group: ServerOverviewBodyGroup) => ( - <> -
  • - {util.commify(group.count)} -
    • -
  • - {group.average_orbit} -
    • -
  • - {group.average_size} -
    • -
  • - {group.largest_size} -
    • -
  • - {group.smallest_size} -
    • - +const bodyGroupTable = (group: ServerOverviewBodyGroup) => ( + + + {util.commify(group.count)} + {group.average_orbit} + {group.average_size} + {group.largest_size} + {group.smallest_size} + +
    ); +const BODY_TYPES: Array<[string, keyof ServerOverview['bodies']['types']]> = [ + ['Asteroids', 'asteroids'], + ['Gas Giants', 'gas_giants'], + ['Habitables', 'habitables'], + ['Stations', 'stations'], +]; + const BodiesTab: React.FunctionComponent = ({ data }) => ( - +
    + + + {util.commify(data.count)} + {util.commify(data.colony_count)} + +
    + +

    Types

    + {BODY_TYPES.map(([label, key]) => ( +
    + {label} + {bodyGroupTable(data.types[key])} +
    + ))} +
    ); export default BodiesTab; diff --git a/app/components/stats/general/buildingsTab.tsx b/app/components/stats/general/buildingsTab.tsx index dd06d838..11909559 100644 --- a/app/components/stats/general/buildingsTab.tsx +++ b/app/components/stats/general/buildingsTab.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { ServerOverview } from 'app/interfaces'; -import CollapsibleSection from 'app/components/stats/general/collapsibleSection'; +import StatRow from 'app/components/stats/general/statRow'; import * as util from 'app/util'; type Props = { @@ -8,31 +8,29 @@ type Props = { }; const BuildingsTab: React.FunctionComponent = ({ data }) => ( - +
    + + + {util.commify(data.count)} + +
    + +

    Types

    + {Object.keys(data.types) + .sort() + .map((key) => ( +
    + {key} + + + {util.commify(data.types[key].count)} + {data.types[key].average_level} + {data.types[key].highest_level} + +
    +
    + ))} +
    ); export default BuildingsTab; diff --git a/app/components/stats/general/collapsibleSection.tsx b/app/components/stats/general/collapsibleSection.tsx deleted file mode 100644 index 6c102901..00000000 --- a/app/components/stats/general/collapsibleSection.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useState } from 'react'; - -type Props = { - title: string; - children: React.ReactNode; -}; - -// -// Replaces the legacy tree's DOM-class-toggle expander (app/yui/stats.js's `expander`, driven by -// clicks delegated to label.statsSubHeader) with plain component state. -// -const CollapsibleSection: React.FunctionComponent = ({ title, children }) => { - const [expanded, setExpanded] = useState(false); - - return ( -
  • - setExpanded(!expanded)}> - - {expanded ? '▾' : '▸'} {title} - - - {expanded &&
      {children}
    } -
    • - ); -}; - -export default CollapsibleSection; diff --git a/app/components/stats/general/empiresTab.tsx b/app/components/stats/general/empiresTab.tsx index 4536288f..5d6fc035 100644 --- a/app/components/stats/general/empiresTab.tsx +++ b/app/components/stats/general/empiresTab.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { ServerOverview } from 'app/interfaces'; +import StatRow from 'app/components/stats/general/statRow'; import * as util from 'app/util'; type Props = { @@ -7,32 +8,22 @@ type Props = { }; const EmpiresTab: React.FunctionComponent = ({ data }) => ( -
      -
    • - {util.commify(data.count)} -
      • -
    • - {util.commify(data.active_this_week_count)} -
      • -
    • - {util.commify(data.active_today_count)} -
      • -
    • - {util.commify(data.currently_active_count)} -
      • -
    • - {util.commify(data.average_university_level)} -
      • -
    • - {util.commify(data.highest_university_level)} -
      • -
    • - {util.commify(data.essentia_using_count)} -
      • -
    • - {util.commify(data.isolationist_count)} -
      • -
    + + + {util.commify(data.count)} + {util.commify(data.active_this_week_count)} + {util.commify(data.active_today_count)} + {util.commify(data.currently_active_count)} + + {util.commify(data.average_university_level)} + + + {util.commify(data.highest_university_level)} + + {util.commify(data.essentia_using_count)} + {util.commify(data.isolationist_count)} + +
    ); export default EmpiresTab; diff --git a/app/components/stats/general/glyphsTab.tsx b/app/components/stats/general/glyphsTab.tsx index f6baa187..3390bc83 100644 --- a/app/components/stats/general/glyphsTab.tsx +++ b/app/components/stats/general/glyphsTab.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { ServerOverview } from 'app/interfaces'; +import StatRow from 'app/components/stats/general/statRow'; import * as util from 'app/util'; import _ from 'lodash'; @@ -11,13 +12,15 @@ const GlyphsTab: React.FunctionComponent = ({ data }) => { const glyphs = Object.keys(data.types).sort(); return ( -
      - {glyphs.map((type) => ( -
    • - {util.commify(data.types[type])} -
      • - ))} -
    + + + {glyphs.map((type) => ( + + {util.commify(data.types[type])} + + ))} + +
    ); }; diff --git a/app/components/stats/general/orbitsTab.tsx b/app/components/stats/general/orbitsTab.tsx index 6e2b2663..62e23645 100644 --- a/app/components/stats/general/orbitsTab.tsx +++ b/app/components/stats/general/orbitsTab.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { ServerOverview } from 'app/interfaces'; -import CollapsibleSection from 'app/components/stats/general/collapsibleSection'; +import StatRow from 'app/components/stats/general/statRow'; import * as util from 'app/util'; type Props = { @@ -10,26 +10,22 @@ type Props = { const ORBIT_LABELS = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight']; const OrbitsTab: React.FunctionComponent = ({ data }) => ( -
      -
    • - -
        - {ORBIT_LABELS.map((label, index) => { - const orbit = data[String(index + 1)]; - return ( - -
      • - {util.commify(orbit.bodies)} -
        • -
      • - {util.commify(orbit.inhabited)} -
        • -         - ); - })} -
      -
      • -
    +
    + {ORBIT_LABELS.map((label, index) => { + const orbit = data[String(index + 1)]; + return ( +
    + {label} + + + {util.commify(orbit.bodies)} + {util.commify(orbit.inhabited)} + +
    +
    + ); + })} +
    ); export default OrbitsTab; diff --git a/app/components/stats/general/shipsTab.tsx b/app/components/stats/general/shipsTab.tsx index 40691f68..eaa34cc6 100644 --- a/app/components/stats/general/shipsTab.tsx +++ b/app/components/stats/general/shipsTab.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { ServerOverview } from 'app/interfaces'; -import CollapsibleSection from 'app/components/stats/general/collapsibleSection'; +import StatRow from 'app/components/stats/general/statRow'; import * as util from 'app/util'; type Props = { @@ -8,41 +8,37 @@ type Props = { }; const ShipsTab: React.FunctionComponent = ({ data }) => ( -
      -
    • - {util.commify(data.count)} -
      • -
    • - -
        - {Object.keys(data.types).map((key) => ( - -
      • - {util.commify(data.types[key].count)} -
        • -
      • - {util.commify(data.types[key].smallest_hold_size)} -
        • -
      • - {util.commify(data.types[key].average_hold_size)} -
        • -
      • - {util.commify(data.types[key].largest_hold_size)} -
        • -
      • - {util.commify(data.types[key].slowest_speed)} -
        • -
      • - {util.commify(data.types[key].average_speed)} -
        • -
      • - {util.commify(data.types[key].fastest_speed)} -
        • -         - ))} -
      -
      • -
    +
    + + + {util.commify(data.count)} + +
    + +

    Types

    + {Object.keys(data.types).map((key) => ( +
    + {util.humanize(key)} + + + {util.commify(data.types[key].count)} + + {util.commify(data.types[key].smallest_hold_size)} + + + {util.commify(data.types[key].average_hold_size)} + + + {util.commify(data.types[key].largest_hold_size)} + + {util.commify(data.types[key].slowest_speed)} + {util.commify(data.types[key].average_speed)} + {util.commify(data.types[key].fastest_speed)} + +
    +
    + ))} +
    ); export default ShipsTab; diff --git a/app/components/stats/general/spiesTab.tsx b/app/components/stats/general/spiesTab.tsx index 4fed39eb..ed0fa5a6 100644 --- a/app/components/stats/general/spiesTab.tsx +++ b/app/components/stats/general/spiesTab.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { ServerOverview } from 'app/interfaces'; +import StatRow from 'app/components/stats/general/statRow'; import * as util from 'app/util'; type Props = { @@ -40,16 +41,16 @@ const rows: Array<[string, keyof ServerOverview['spies']]> = [ ]; const SpiesTab: React.FunctionComponent = ({ data }) => ( -
      -
    • - {util.commify(data.count)} -
      • - {rows.map(([label, key]) => ( -
    • - {util.commify(data[key])} -
      • - ))} -
    + + + {util.commify(data.count)} + {rows.map(([label, key]) => ( + + {util.commify(data[key])} + + ))} + +
    ); export default SpiesTab; diff --git a/app/components/stats/general/starsTab.tsx b/app/components/stats/general/starsTab.tsx index b566c94d..12c4bd50 100644 --- a/app/components/stats/general/starsTab.tsx +++ b/app/components/stats/general/starsTab.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { ServerOverview } from 'app/interfaces'; +import StatRow from 'app/components/stats/general/statRow'; import * as util from 'app/util'; type Props = { @@ -7,20 +8,14 @@ type Props = { }; const StarsTab: React.FunctionComponent = ({ data }) => ( -
      -
    • - {util.commify(data.count)} -
      • -
    • - {util.commify(data.seized_count)} -
      • -
    • - {util.commify(data.probed_count)} -
      • -
    • - {util.commify(data.probes_count)} -
      • -
    + + + {util.commify(data.count)} + {util.commify(data.seized_count)} + {util.commify(data.probed_count)} + {util.commify(data.probes_count)} + +
    ); export default StarsTab; diff --git a/app/components/stats/general/statRow.tsx b/app/components/stats/general/statRow.tsx new file mode 100644 index 00000000..2f41e7c7 --- /dev/null +++ b/app/components/stats/general/statRow.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +type Props = { + label: string; + children: React.ReactNode; +}; + +const StatRow: React.FunctionComponent = ({ label, children }) => ( + + + {label} + + {children} + +); + +export default StatRow;