//
// Copyright 2023 DXOS.org
//
import React, { useMemo } from 'react';
import { Chart } from 'react-charts';
import { JsonView } from '../../../components';
import { ResourceName } from './Resource';
export const MetricsView = ({ resource }) => {
    if (!resource) {
        return null;
    }
    return (React.createElement("div", { className: 'divide-y divide-separator' },
        React.createElement("div", { className: 'p-1' },
            React.createElement(ResourceName, { className: 'text-lg', resource: resource }),
            React.createElement(JsonView, { data: resource.info })),
        React.createElement("div", { className: 'p-1' },
            React.createElement("h4", null, "Metrics"),
            resource.metrics?.map((metric, idx) => (React.createElement(MetricComponent, { key: idx, metric: metric }))))));
};
const MetricComponent = ({ metric }) => {
    if (metric.counter) {
        return (React.createElement("span", null,
            metric.name,
            ": ",
            metric.counter.value,
            " ",
            metric.counter.units ?? ''));
    }
    // TODO(burdon): Consider using https://react-charts.tanstack.com/docs/api
    if (metric.timeSeries) {
        const primaryAxis = useMemo(() => ({ scaleType: 'linear', getValue: (point) => point.idx }), []);
        const secondaryAxes = useMemo(() => [{ elementType: 'line', getValue: (point) => point.value }], []);
        const data = metric.timeSeries.tracks?.map(({ name, points }) => ({
            label: name,
            data: points?.map((p, idx) => ({ idx: points.length - 1 - idx, value: p.value })) ?? [],
        })) ?? [];
        return (React.createElement("div", { className: 'm-2' },
            React.createElement("div", null, metric.name),
            React.createElement("div", { className: 'flex gap-2' },
                React.createElement("span", null, "total"),
                React.createElement("span", null, JSON.stringify(metric.timeSeries.tracks?.reduce((acc, track) => ({ ...acc, [track.name]: track.total }), {}), (key, value) => {
                    return typeof value === 'number' ? value.toFixed(2) : value;
                }))),
            React.createElement("div", { className: 'is-full bs-[160px] m-2' },
                React.createElement(Chart, { options: {
                        primaryAxis,
                        secondaryAxes,
                        interactionMode: 'closest',
                        data,
                    } }))));
    }
    if (metric.multiCounter) {
        const records = metric.multiCounter.records ?? [];
        records.sort((a, b) => a.key.localeCompare(b.key));
        return (React.createElement(JsonView, { data: {
                [metric.name]: Object.fromEntries(records.map(({ key, value }) => [key, `${value.toString()} ${metric.multiCounter?.units ?? ''}`])),
            } }));
    }
    if (metric.custom) {
        return React.createElement(JsonView, { data: { [metric.name]: metric.custom.payload } });
    }
    return React.createElement(JsonView, { data: metric });
};
//# sourceMappingURL=MetricsView.js.map