kopia lustrzana https://github.com/bugout-dev/moonstream
commit
12c91941f7
|
@ -80,7 +80,8 @@ const NewDashboard = (props) => {
|
|||
]);
|
||||
|
||||
const filterFn = (item, inputValue) =>
|
||||
item.subscription_type_id === "ethereum_blockchain" &&
|
||||
(item.subscription_type_id === "ethereum_blockchain" ||
|
||||
item.subscription_type_id === "polygon_blockchain") &&
|
||||
(!inputValue ||
|
||||
item.address.toUpperCase().includes(inputValue.toUpperCase()) ||
|
||||
item.label.toUpperCase().includes(inputValue.toUpperCase()));
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import { ResponsiveLineCanvas } from "@nivo/line";
|
||||
|
||||
const Report = ({ data }) => {
|
||||
const Report = ({ data, metric }) => {
|
||||
const commonProperties = {
|
||||
animate: false,
|
||||
enableSlices: "x",
|
||||
|
@ -10,7 +10,23 @@ const Report = ({ data }) => {
|
|||
const xyData = data.map((item) => {
|
||||
return { x: item.date, y: item.count };
|
||||
});
|
||||
const plotData = [{ id: "1", data: xyData }];
|
||||
|
||||
xyData.reverse();
|
||||
|
||||
// Cumulative sum calculation inspired by: https://stackoverflow.com/a/55261098
|
||||
function generateCumulativeSum(sum) {
|
||||
function cumulativeSum(item) {
|
||||
sum += item.y;
|
||||
return { x: item.x, y: sum };
|
||||
}
|
||||
return cumulativeSum;
|
||||
}
|
||||
|
||||
const xyCumulativeData = xyData.map(generateCumulativeSum(0));
|
||||
|
||||
console.log(`metric ${metric} \n xyCumulativeData: `, xyCumulativeData);
|
||||
|
||||
const plotData = [{ id: "1", data: xyCumulativeData }];
|
||||
|
||||
return (
|
||||
<ResponsiveLineCanvas
|
||||
|
@ -19,11 +35,11 @@ const Report = ({ data }) => {
|
|||
isInteractive={true}
|
||||
xScale={{
|
||||
type: "time",
|
||||
format: "%Y-%m-%d",
|
||||
format: "%Y-%m-%d %H",
|
||||
useUTC: false,
|
||||
precision: "day",
|
||||
precision: "hour",
|
||||
}}
|
||||
xFormat="time:%Y-%m-%d"
|
||||
xFormat="time:%Y-%m-%d %H"
|
||||
yScale={{
|
||||
type: "linear",
|
||||
}}
|
||||
|
@ -40,7 +56,8 @@ const Report = ({ data }) => {
|
|||
tickValues: "every 7 day",
|
||||
tickRotation: 90,
|
||||
}}
|
||||
curve="step"
|
||||
curve="linear"
|
||||
enableArea={true}
|
||||
enablePointLabel={false}
|
||||
pointSize={0}
|
||||
colors="#fd671b"
|
||||
|
|
|
@ -24,7 +24,7 @@ const SubscriptionReport = ({ url, id, type }) => {
|
|||
if (!data || isLoading) return <Spinner />;
|
||||
return (
|
||||
<Flex w="100%" h="auto" flexGrow={1} flexBasis="420px" direction="column">
|
||||
{data.data?.events && Object.keys(data.data?.events) && (
|
||||
{data?.events && Object.keys(data?.events) && (
|
||||
<Flex
|
||||
w="100%"
|
||||
h="auto"
|
||||
|
@ -33,7 +33,7 @@ const SubscriptionReport = ({ url, id, type }) => {
|
|||
direction="column"
|
||||
>
|
||||
<Heading size="sm">Events</Heading>
|
||||
{Object.keys(data.data.events.year).map((key) => {
|
||||
{Object.keys(data.events).map((key) => {
|
||||
return (
|
||||
<Flex
|
||||
key={v4()}
|
||||
|
@ -55,13 +55,13 @@ const SubscriptionReport = ({ url, id, type }) => {
|
|||
>
|
||||
{key}
|
||||
</Text>
|
||||
<Report data={data.data.events.year[key]} />
|
||||
<Report data={data.events[key]} metric={key} />
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
)}
|
||||
{data.data?.methods && Object.keys(data.data?.methods) && (
|
||||
{data?.functions && Object.keys(data?.functions) && (
|
||||
<Flex
|
||||
w="100%"
|
||||
h="auto"
|
||||
|
@ -69,8 +69,8 @@ const SubscriptionReport = ({ url, id, type }) => {
|
|||
flexBasis="420px"
|
||||
direction="column"
|
||||
>
|
||||
<Heading size="sm">Methods</Heading>
|
||||
{Object.keys(data.data.methods.year).map((key) => {
|
||||
<Heading size="sm">functions</Heading>
|
||||
{Object.keys(data.functions).map((key) => {
|
||||
return (
|
||||
<Flex
|
||||
key={v4()}
|
||||
|
@ -92,13 +92,13 @@ const SubscriptionReport = ({ url, id, type }) => {
|
|||
>
|
||||
{key}
|
||||
</Text>
|
||||
<Report data={data.data.methods.year[key]} />
|
||||
<Report data={data.functions[key]} metric={key} />
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
)}
|
||||
{data.data?.generic && Object.keys(data.data?.generic) && (
|
||||
{data?.generic && Object.keys(data?.generic) && (
|
||||
<Flex
|
||||
w="100%"
|
||||
h="auto"
|
||||
|
@ -107,7 +107,7 @@ const SubscriptionReport = ({ url, id, type }) => {
|
|||
direction="column"
|
||||
>
|
||||
<Heading size="sm">Account generic</Heading>
|
||||
{Object.keys(data.data.generic.year).map((key) => {
|
||||
{Object.keys(data.generic).map((key) => {
|
||||
return (
|
||||
<Flex
|
||||
key={v4()}
|
||||
|
@ -129,7 +129,7 @@ const SubscriptionReport = ({ url, id, type }) => {
|
|||
>
|
||||
{key}
|
||||
</Text>
|
||||
<Report data={data.data.generic.year[key]} />
|
||||
<Report data={data.generic[key]} metric={key} />
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
|
|
|
@ -35,6 +35,6 @@ export const getDashboard = (dashboardId) => {
|
|||
export const getDashboardLinks = (dashboardId) => {
|
||||
return http({
|
||||
method: "GET",
|
||||
url: `${API_URL}/dashboards/${dashboardId}/data_links`,
|
||||
url: `${API_URL}/dashboards/${dashboardId}/stats`,
|
||||
});
|
||||
};
|
||||
|
|
Ładowanie…
Reference in New Issue