diff --git a/explorer/src/components/SolanaPingCard.tsx b/explorer/src/components/SolanaPingCard.tsx
index 01f79862c..1d1463bff 100644
--- a/explorer/src/components/SolanaPingCard.tsx
+++ b/explorer/src/components/SolanaPingCard.tsx
@@ -1,6 +1,7 @@
import React from "react";
import classNames from "classnames";
import {
+ PingInfo,
PingRollupInfo,
PingStatus,
useSolanaPingInfo,
@@ -107,12 +108,10 @@ const CUSTOM_TOOLTIP = function (this: any, tooltipModel: ChartTooltipModel) {
// Set Text
if (tooltipModel.body) {
- const { label, value } = tooltipModel.dataPoints[0];
+ const { label } = tooltipModel.dataPoints[0];
const tooltipContent = tooltipEl.querySelector("div");
if (tooltipContent) {
- let innerHtml = `
${value} ms
`;
- innerHtml += `${label}
`;
- tooltipContent.innerHTML = innerHtml;
+ tooltipContent.innerHTML = `${label}`;
}
}
@@ -173,34 +172,56 @@ const CHART_OPTION: ChartOptions = {
function PingBarChart({ pingInfo }: { pingInfo: PingRollupInfo }) {
const [series, setSeries] = React.useState("short");
const seriesData = pingInfo[series] || [];
-
+ const maxMean = seriesData.reduce((a, b) => {
+ return Math.max(a, b.mean);
+ }, 0);
const seriesLength = seriesData.length;
+ const backgroundColor = (val: PingInfo) => {
+ if (val.submitted === 0) {
+ return "#08a274";
+ }
+ return val.loss > 0.5 ? "#f00" : "#00D192";
+ };
const chartData: Chart.ChartData = {
labels: seriesData.map((val, i) => {
- return `
- ${val.confirmed} of ${val.submitted} confirmed
- ${
- val.loss
- ? `${val.loss.toLocaleString(undefined, {
- style: "percent",
- minimumFractionDigits: 2,
- })} loss
`
- : ""
+ if (val.submitted === 0) {
+ return `
+
+
Ping statistics unavailable
+ ${SERIES_INFO[series].label(seriesLength - i)}min ago
+
+ `;
}
- ${SERIES_INFO[series].label(seriesLength - i)}min ago
+
+ return `
+ ${val.mean} ms
+
+
${val.confirmed} of ${val.submitted} confirmed
+ ${
+ val.loss
+ ? `
${val.loss.toLocaleString(undefined, {
+ style: "percent",
+ minimumFractionDigits: 2,
+ })} loss
`
+ : ""
+ }
+ ${SERIES_INFO[series].label(seriesLength - i)}min ago
+
`;
}),
datasets: [
{
minBarLength: 2,
- backgroundColor: seriesData.map((val) =>
- val.loss > 0.5 ? "#f00" : "#00D192"
- ),
- hoverBackgroundColor: seriesData.map((val) =>
- val.loss > 0.5 ? "#f00" : "#00D192"
- ),
+ backgroundColor: seriesData.map(backgroundColor),
+ hoverBackgroundColor: seriesData.map(backgroundColor),
borderWidth: 0,
- data: seriesData.map((val) => val.mean || 0),
+ data: seriesData.map((val) => {
+ if (val.submitted === 0) {
+ return maxMean * 0.5;
+ }
+
+ return val.mean || 0;
+ }),
},
],
};