LogalDeveloper/owncast
0
Fork 0
Code Activity

Componentize a bit and consolidate some data

Browse Source
This commit is contained in:
Gabe Kangas
2020-10-28 18:36:25 -07:00
parent 87d69e1665
commit df14a55429
7 changed files with 165 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/pages/components/chart.tsx
View File

@@ -17,17 +17,13 @@ interface ChartProps {
}
function CustomizedTooltip(props: ToolTipProps) {
const { active, payload } = props;
const { active, payload, unit } = props;
if (active && payload && payload[0]) {
const time = payload[0].payload
? timeFormat("%I:%M")(new Date(payload[0].payload.time), {
nearestTo: 1,
})
: "";
const time = payload[0].payload ? timeFormat("%I:%M")(new Date(payload[0].payload.time)) : "";
return (
<div className="custom-tooltip">
<p className="label">
<strong>{time}</strong> {payload[0].payload.value} %
<strong>{time}</strong> {payload[0].payload.value} {unit}
</p>
</div>
);
@@ -38,9 +34,7 @@ CustomizedTooltip.defaultProps = defaultProps;
export default function Chart({ data, color, unit }: ChartProps) {
const timeFormatter = (tick: string) => {
return timeFormat("%I:%M")(new Date(tick), {
nearestTo: 1,
});
return timeFormat("%I:%M")(new Date(tick));
};
return (
@@ -60,7 +54,7 @@ export default function Chart({ data, color, unit }: ChartProps) {
unit={unit}
domain={["dataMin", "dataMax"]}
/>
<Tooltip content={<CustomizedTooltip />} />
<Tooltip content={<CustomizedTooltip unit={unit} />} />
<Legend />
<Line
type="monotone"

6
web/pages/components/main-layout.tsx
View File

@@ -67,15 +67,9 @@ export default function MainLayout(props) {
</Menu.Item>
<SubMenu key="current-stream-menu" icon={<LineChartOutlined />} title="Stream Details">
<Menu.Item key="broadcast-info">
<Link href="/broadcast-info">Broadcaster Info</Link>
</Menu.Item>
<Menu.Item key="viewer-info">
<Link href="/viewer-info">Viewers</Link>
</Menu.Item>
<Menu.Item key="connected-clients">
<Link href="/connected-clients">Connected Clients</Link>
</Menu.Item>
<Menu.Item key="hardware-info">
<Link href="/hardware-info">Hardware</Link>
</Menu.Item>

25
web/pages/components/statistic.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { Statistic, Card, Col} from "antd";
interface ItemProps {
title: string,
value: string,
prefix: JSX.Element,
};
export default function StatisticItem(props: ItemProps) {
const { title, value, prefix } = props;
const valueStyle = { color: "#334", fontSize: "1.8rem" };
return (
<Col span={8}>
<Card>
<Statistic
title={title}
value={value}
valueStyle={valueStyle}
prefix={prefix}
/>
</Card>
</Col>
);
}