+
+
+ {title}
+
+
+ {subtitle ? (
+
{subtitle}
+ ) : null}
+
+
+ {showDetectedKeys ? (
+
+
+ Fields:{" "}
+ {fieldMeta.allFields.length
+ ? fieldMeta.allFields.map((field) => toStartCaseLabel(field)).join(", ")
+ : "None"}
+
+
+ Numeric:{" "}
+ {fieldMeta.numericFields.length
+ ? fieldMeta.numericFields.map((field) => toStartCaseLabel(field)).join(", ")
+ : "None"}
+
+
+ Resolved: Y = {toStartCaseLabel(resolvedYAxisField || "-")}, X ={" "}
+ {toStartCaseLabel(resolvedXAxisField || "-")}, Value = {toStartCaseLabel(resolvedValueField || "-")}
+
+
+ Max columns: {normalizedMaxColumns}
+
+
+ Font: {fontFamilySelect}
+
+
+ ) : null}
+
+ {!validation.ok ? (
+
+
+ Invalid data
+
+
+ {validation.message}
+
+
+ ) : !hasRenderableData ? (
+
+
+
+ No data
+
+
+ Rows are present, but no valid values were found for the selected X, Y, and Value fields.
+
+
+
+ ) : (
+ <>
+ {selectedCellSummary ? (
+
+
Selected
+
+ {toStartCaseLabel(resolvedYAxisField)}: {String(selectedCellSummary.yValue)}
+
+
+ {toStartCaseLabel(resolvedXAxisField)}: {String(selectedCellSummary.xValue)}
+
+
+ {toStartCaseLabel(resolvedValueField)}: {formatValue(selectedCellSummary.value as number | null)}
+
+
+ ) : null}
+
+
+
+
+
+ |
+ {toStartCaseLabel(resolvedYAxisField)}
+ |
+
+ {chartData.xValues.map((xVal) => (
+
+ {String(xVal)}
+ |
+ ))}
+
+
+
+
+ {chartData.yValues.map((yVal) => {
+ const yKey = String(yVal);
+
+ return (
+
+ |
+ {yKey}
+ |
+
+ {chartData.xValues.map((xVal) => {
+ const xKey = String(xVal);
+ const cell = chartData.matrix[yKey]?.[xKey];
+ const value = cell?.value ?? null;
+ const key = `${yKey}__${xKey}`;
+ const isSelected = key === selectedCellKey;
+
+ const tooltipText =
+ value == null
+ ? `${toStartCaseLabel(resolvedYAxisField)}: ${yKey}\n${toStartCaseLabel(
+ resolvedXAxisField
+ )}: ${xKey}\nNo data`
+ : `${toStartCaseLabel(resolvedYAxisField)}: ${yKey}\n${toStartCaseLabel(
+ resolvedXAxisField
+ )}: ${xKey}\n${toStartCaseLabel(resolvedValueField)}: ${formatValue(value)}`;
+
+ return (
+ {
+ const payload = {
+ xField: resolvedXAxisField,
+ yField: resolvedYAxisField,
+ valueField: resolvedValueField,
+ xValue: xVal,
+ yValue: yVal,
+ value,
+ row: cell?.raw ?? null,
+ };
+ setSelectedCell(payload);
+ setSelectedValue(value == null ? "No data" : formatValue(value));
+ }}
+ style={{
+ padding: "14px 12px",
+ textAlign: "center",
+ verticalAlign: "middle",
+ borderBottom: `1px solid ${borderColor}`,
+ background: getCellBackground(value),
+ color: getCellTextColor(value),
+ fontSize: 15,
+ fontWeight: 700,
+ lineHeight: 1.2,
+ letterSpacing: "0.01em",
+ textShadow: getCellTextShadow(value),
+ cursor: "pointer",
+ outline: isSelected ? `2px solid ${selectedBorderColor}` : "none",
+ outlineOffset: isSelected ? "-2px" : undefined,
+ boxShadow: isSelected
+ ? `inset 0 0 0 2px ${selectedBorderColor}`
+ : "none",
+ fontFamily: "inherit",
+ }}
+ >
+ {showCellValues ? formatValue(value) : ""}
+ |
+ );
+ })}
+
+ );
+ })}
+
+
+
+
+
+
+ )}
+