Admin UI for playback metrics. For https://github.com/owncast/owncast/issues/793 (#462)

web/components/chart.tsx

@@ -16,6 +16,8 @@ interface ChartProps {
   title?: string;
   color: string;
   unit: string;
+  yFlipped?: boolean;
+  yLogarithmic?: boolean;
   dataCollections?: any[];
 }
 
@@ -29,7 +31,15 @@ function createGraphDataset(dataArray) {
   return dataValues;
 }
 
-export default function Chart({ data, title, color, unit, dataCollections }: ChartProps) {
+export default function Chart({
+  data,
+  title,
+  color,
+  unit,
+  dataCollections,
+  yFlipped,
+  yLogarithmic,
+}: ChartProps) {
   const renderData = [];
 
   if (data && data.length > 0) {
@@ -45,9 +55,24 @@ export default function Chart({ data, title, color, unit, dataCollections }: Cha
       name: collection.name,
       data: createGraphDataset(collection.data),
       color: collection.color,
+      dataset: collection.options,
     });
   });
 
+  // ChartJs.defaults.scales.linear.reverse = true;
+
+  const options = {
+    scales: {
+      y: { reverse: false, type: 'linear' },
+      x: {
+        type: 'time',
+      },
+    },
+  };
+
+  options.scales.y.reverse = yFlipped;
+  options.scales.y.type = yLogarithmic ? 'logarithmic' : 'linear';
+
   return (
     <div className="line-chart-container">
       <LineChart
@@ -58,6 +83,7 @@ export default function Chart({ data, title, color, unit, dataCollections }: Cha
         color={color}
         data={renderData}
         download={title}
+        library={options}
       />
     </div>
   );
@@ -67,4 +93,6 @@ Chart.defaultProps = {
   dataCollections: [],
   data: [],
   title: '',
+  yFlipped: false,
+  yLogarithmic: false,
 };

web/components/main-layout.tsx

@@ -206,6 +206,9 @@ export default function MainLayout(props) {
             <Menu.Item key="hardware-info">
               <Link href="/hardware-info">Hardware</Link>
             </Menu.Item>
+            <Menu.Item key="stream-health">
+              <Link href="/stream-health">Stream Health</Link>
+            </Menu.Item>
             <Menu.Item key="logs">
               <Link href="/logs">Logs</Link>
             </Menu.Item>

web/components/statistic.tsx

@@ -9,6 +9,7 @@ interface StatisticItemProps {
   title?: string;
   value?: any;
   prefix?: any;
+  suffix?: string;
   color?: string;
   progress?: boolean;
   centered?: boolean;
@@ -18,13 +19,14 @@ const defaultProps = {
   title: '',
   value: 0,
   prefix: null,
+  suffix: null,
   color: '',
   progress: false,
   centered: false,
   formatter: null,
 };
 
-function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
+function ProgressView({ title, value, prefix, suffix, color }: StatisticItemProps) {
   const endColor = value > 90 ? 'red' : color;
   const content = (
     <div>
@@ -33,7 +35,10 @@ function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
         <Text type="secondary">{title}</Text>
       </div>
       <div>
-        <Text type="secondary">{value}%</Text>
+        <Text type="secondary">
+          {value}
+          {suffix || '%'}
+        </Text>
       </div>
     </div>
   );