Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dcellar-web-ui): add dashboard module #288

Merged
merged 38 commits into from
Nov 30, 2023
Merged
Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
c4dc3a3
feat(dcellar-web-ui): add billing history
devinxl Nov 15, 2023
374a5e2
Merge branch 'main' into feat/billing-history-table
devinxl Nov 15, 2023
c51ee68
Merge branch 'main' into feat/billing-history-table
devinxl Nov 16, 2023
8018e8f
Merge branch 'main' into feat/billing-history-table
devinxl Nov 16, 2023
f3a2899
Merge branch 'main' into feat/billing-history-table
devinxl Nov 16, 2023
466dfe7
feat(dcellar-web-ui): add billing history
devinxl Nov 15, 2023
67fdb96
Merge branch 'feat/billing-history-table' of nodereal.github.com:node…
devinxl Nov 20, 2023
6df250b
fix(dcellar-web-ui): fix some billint history issues
devinxl Nov 20, 2023
f8d4984
feat(dcellar-web-ui): add billing history
devinxl Nov 15, 2023
420e6fb
fix(dcellar-web-ui): fix some billint history issues
devinxl Nov 20, 2023
c3ac986
Merge branch 'feat/billing-history-table' of nodereal.github.com:node…
devinxl Nov 20, 2023
272cc60
feat(dcellar-web-ui): migrate billing type to types
devinxl Nov 20, 2023
e029145
chore(dcellar-web-ui): remove log
devinxl Nov 21, 2023
6269e47
feat(dcellar-web-ui): change the precision of billing history to 18
devinxl Nov 21, 2023
f1e676e
fix(dcellar-web-ui): delete object format
devinxl Nov 21, 2023
7bf8243
feat(dcellar-web-ui): update filter type data
devinxl Nov 21, 2023
924886d
feat(dcellar-web-ui): add billing history
devinxl Nov 15, 2023
9d6d03f
feat(dcellar-web-ui): add billing history
devinxl Nov 15, 2023
f672657
fix(dcellar-web-ui): fix some billint history issues
devinxl Nov 20, 2023
5cfbf3d
feat(dcellar-web-ui): migrate billing type to types
devinxl Nov 20, 2023
bed0f98
chore(dcellar-web-ui): remove log
devinxl Nov 21, 2023
5d07d58
feat(dcellar-web-ui): change the precision of billing history to 18
devinxl Nov 21, 2023
75c747f
fix(dcellar-web-ui): delete object format
devinxl Nov 21, 2023
07e9a90
feat(dcellar-web-ui): update filter type data
devinxl Nov 21, 2023
e42b2fe
Merge branch 'feat/billing-history-table' of nodereal.github.com:node…
devinxl Nov 21, 2023
203546c
feat(dcellar-web-ui): add dashboard module
devinxl Nov 21, 2023
1119a66
feat(dcellar-web-ui): add loading to dashboard
devinxl Nov 22, 2023
3cb3af9
Merge remote-tracking branch 'origin/main' into feat/add-dashboard/devin
devinxl Nov 27, 2023
5e8c1cb
feat(dcellar-web-ui): add bucket chart and opt constants
devinxl Nov 28, 2023
238408e
fix(dcellar-web-ui): remove feature value in barchart hook
devinxl Nov 28, 2023
172e883
fix(dcellar-web-ui): fix bar chart y-axis
devinxl Nov 28, 2023
7bf2d10
fix(dcellar-web-ui): fix invlid date and compatiable 429
devinxl Nov 29, 2023
cefe463
fix(dcellar-web-ui): set as nonrefundable button width
devinxl Nov 29, 2023
d3e0d7e
fix(dcellar-web-ui): mergeArr function error
devinxl Nov 30, 2023
b2807ed
fix(dcellar-web-ui): merge arr error
devinxl Nov 30, 2023
7a9ce95
Merge remote-tracking branch 'origin/main' into feat/add-dashboard/devin
devinxl Nov 30, 2023
e93f30f
feat(dcellar-web-ui): enlargement upload limit to 100 (#286)
devinxl Nov 30, 2023
5c1864e
Merge branch 'main' into feat/add-dashboard/devin
devinxl Nov 30, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(dcellar-web-ui): add bucket chart and opt constants
devinxl committed Nov 28, 2023
commit 5e8c1cb0af29e9b25293789bafedfc205682952d
6 changes: 4 additions & 2 deletions apps/dcellar-web-ui/src/base/env.ts
Original file line number Diff line number Diff line change
@@ -15,7 +15,8 @@ const {
NEXT_PUBLIC_GREENFIELD_CHAIN_MAINNET_RPC_URL,
} = publicRuntimeConfig || {};
const {
NEXT_PRIVATE_BILLING_API_URL
NEXT_PRIVATE_BILLING_API_URL,
NEXT_PRIVATE_EXPLORER_API_URL,
} = serverRuntimeConfig || {};

export type TRuntimeEnv = 'development' | 'qa' | 'testnet' | 'mainnet';
@@ -36,4 +37,5 @@ export const GREENFIELD_CHAIN_EXPLORER_URL = NEXT_PUBLIC_GREENFIELD_CHAIN_EXPLOR
export const BSC_EXPLORER_URL = NEXT_PUBLIC_BSC_EXPLORER_URL;
export const GREENFIELD_MAINNET_ID = NEXT_PUBLIC_GREENFIELD_CHAIN_MAINNET_ID;
export const GREENFIELD_MAINNET_RPC_URL = NEXT_PUBLIC_GREENFIELD_CHAIN_MAINNET_RPC_URL;
export const BILLING_API_URL = NEXT_PRIVATE_BILLING_API_URL;
export const BILLING_API_URL = NEXT_PRIVATE_BILLING_API_URL;
export const EXPLORER_API_URL = NEXT_PRIVATE_EXPLORER_API_URL;
1 change: 1 addition & 0 deletions apps/dcellar-web-ui/src/base/theme/light.ts
Original file line number Diff line number Diff line change
@@ -38,6 +38,7 @@ export const light = {
'label-normal': '#EEBE11',
'label-active': '#F1CA3C',
primary: '#00BA34',
chartTick: rgba('#AEB4BC', 0.3),
},
bg: {
bottom: '#f5f5f5',
Original file line number Diff line number Diff line change
@@ -3,14 +3,14 @@ import { DCButton, DCButtonProps } from '@/components/common/DCButton';
import { Text } from '@totejs/uikit';
import { smMedia } from '@/modules/responsive';
import { useRouter } from 'next/router';
import { InternalRoutePaths } from '@/utils/constant';
import { useAccount, useDisconnect } from 'wagmi';
import { ssrLandingRoutes } from '@/pages/_app';
import { useOffChainAuth } from '@/context/off-chain-auth/useOffChainAuth';
import { checkOffChainDataAvailable, setLogin } from '@/store/slices/persist';
import { useAsyncEffect } from 'ahooks';
import { useAppDispatch } from '@/store';
import { useModal } from '@totejs/walletkit';
import { InternalRoutePaths } from '@/constants/paths';

interface ConnectWalletProps extends DCButtonProps {
icon?: ReactElement;
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import Link from 'next/link';
import { Image } from '@totejs/uikit';
import { useRouter } from 'next/router';
import { useAppSelector } from '@/store';
import { InternalRoutePaths } from '@/utils/constant';
import { InternalRoutePaths } from '@/constants/paths';
import { IconFont } from '@/components/IconFont';

const Container = styled.main`
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import { DCButton } from '../common/DCButton';
import { useWalletSwitchNetWork } from '@/context/WalletConnectContext';
import { useLogin } from '@/hooks/useLogin';
import { IconFont } from '@/components/IconFont';
import { CHAIN_NAMES } from '@/utils/constant';
import { CHAIN_NAMES } from '@/constants/wallet';

export const WrongNetworkModal = ({ isOpen, onClose }: any) => {
const { logout } = useLogin();
13 changes: 13 additions & 0 deletions apps/dcellar-web-ui/src/components/charts/BarChart/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { BaseChart, BaseChartProps } from '@/components/charts/BaseChart';
import { useBarChartOptions } from './useBarChartOptions';

export interface BarChartProps extends BaseChartProps {
noData: boolean
}

export function BarChart({noData, ...props}: BarChartProps) {
const { options, ...restProps } = props;
const finalOptions = useBarChartOptions(options, noData);

return <BaseChart options={finalOptions} {...restProps} />;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
import { useColorMode, useColorModeValue, useTheme } from '@totejs/uikit';
import { useEffect, useState } from 'react';
import {merge} from 'lodash-es';
import { cssVar } from '@/utils/common';
import { noDataOptions } from '@/constants/chart';

export function useBarChartOptions(options: any, noData: boolean) {
const theme = useTheme();
const { colorMode } = useColorMode();
const colors = useColorModeValue(theme.colors.light, theme.colors.dark);

const [finalOptions, setFinalOptions] = useState({});

useEffect(() => {
if (colorMode !== document.documentElement.dataset.theme) {
return;
}
if (noData) {
return setFinalOptions(noDataOptions);
}
const defaultOptions = {
title: {
text: 'Cost Trend',
textStyle: {
color: cssVar('readable.normal'),
fontSize: 16,
fontWeight: 700,
},
left: 0,
padding: [5, 5, 5, 0],
textAlign: 'left',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
containLabel: true,
left: 'left',
right: '0%',
bottom: '0%',
},
toolbox: {
feature: {
dataView: { show: false, readOnly: false },
restore: { show: false },
saveAsImage: { show: false },
},
},
legend: {
icon: 'circle',
itemHeight: 8,
itemWidth: 8,
itemGap: 16,
right: 30,
// data: ['Monthly Cost', 'Estimate Cost'],
textStyle: {
fontWeight: 400,
},
},
xAxis: [{
type: 'category',
axisTick: {
show: true,
alignWithLabel: true,
lineStyle: {
color: cssVar('bg.bottom'),
},
},
axisLabel: {
color: cssVar('readable.tertiary'),
fontSize: 12,
fontWeight: 500,
margin: 16,
lineHeight: 12,
},
axisLine: {
show: false,
margin: 18,
},
axisPointer: {
lineStyle: {
color: cssVar('readable.secondary'),
type: 'solid',
},
},
}],
yAxis: [{
type: 'value',
position: 'left',
alignTicks: true,
splitNumber: 5,
axisLine: {
show: false,
},
axisLabel: {
color: cssVar('readable.tertiary'),
fontSize: 12,
fontWeight: 500,
formatter: '{value} BNB',
},
splitLine: {
lineStyle: {
color: cssVar('bg.bottom'),
},
},
}],
series: [
],
};

const finalOptions = merge(defaultOptions, options);

setFinalOptions(finalOptions);
}, [colors, options, colorMode, noData]);

return finalOptions;
}
12 changes: 7 additions & 5 deletions apps/dcellar-web-ui/src/components/charts/LineChart/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { BaseChart, BaseChartProps } from '@/components/charts/BaseChart';
import { useLineChartOptions } from '@/components/charts/LineChart/useLineChartOptions';

export interface LineChartProps extends BaseChartProps {}
export interface LineChartProps extends BaseChartProps {
noData: boolean
}

export function LineChart(props: LineChartProps) {
const { options } = props;
const finalOptions = useLineChartOptions(options);
export function LineChart({noData, ...props}: LineChartProps) {
const { options, ...restProps } = props;
const finalOptions = useLineChartOptions(options, noData);

return <BaseChart options={finalOptions} />;
return <BaseChart options={finalOptions} {...restProps} />;
}
Original file line number Diff line number Diff line change
@@ -4,8 +4,10 @@ import {merge} from 'lodash-es';
import * as echarts from 'echarts/core';

import { cssVar } from '@/utils/common';
import { formatChartXAxisTime } from '@/utils/chart';
import { noDataOptions } from '@/constants/chart';

export function useLineChartOptions(options: any) {
export function useLineChartOptions(options: any, noData: boolean) {
const theme = useTheme();
const { colorMode } = useColorMode();
const colors = useColorModeValue(theme.colors.light, theme.colors.dark);
@@ -16,6 +18,9 @@ export function useLineChartOptions(options: any) {
if (colorMode !== document.documentElement.dataset.theme) {
return;
}
if (noData) {
return setFinalOptions(noDataOptions);
}
const defaultOptions = {
tooltip: {
trigger: 'axis',
@@ -24,12 +29,14 @@ export function useLineChartOptions(options: any) {
padding: 8,
textStyle: {
color: cssVar('readable.normal'),
fontSize: 12,
},
axisPointer: {
type: 'line',
z: -1,
lineStyle: {
color: cssVar('readable.secondary'),
type: 'solid',
color: cssVar('readable.disable'),
},
},
extraCssText: `box-shadow: ${cssVar('chartTooltip', 'shadows')};border-radius:4px;`,
@@ -45,12 +52,20 @@ export function useLineChartOptions(options: any) {
type: 'category',
boundaryGap: false,
axisLabel: {
margin: 7,
marginTop: 4,
fontWeight: 400,
lineHeight: 12,
color: cssVar('readable.disable'),
fontSize: 10,
fontWeight: 500,
lineHeight: 14,
fontFamily: 'Inter',
color: cssVar('readable.secondary'),
formatter: formatChartXAxisTime,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: cssVar('readable.chartTick'),
},
},
axisLine: {
lineStyle: {
@@ -60,41 +75,31 @@ export function useLineChartOptions(options: any) {
axisTick: {
alignWithLabel: true,
lineStyle: {
color: cssVar('readable.border'),
color: cssVar('readable.chartTick'),
},
},
},
yAxis: {
type: 'value',
splitNumber: 4,
scale: true,
splitLine: {
show: false,
spiltLine: {
lineStyle: {
color: cssVar('readable.border'),
},
},
axisLabel: {
margin: 4,
fontSize: 10,
fontWeight: 500,
lineHeight: 14,
fontFamily: 'Inter',
color: cssVar('readable.secondary'),
},
color: 'red',
}
}
},
grid: {
left: 6,
left: 18,
right: 18,
top: 6,
bottom: 0,
top: 4,
bottom: 18,
containLabel: true,
},
series: [
{
type: 'line',
smooth: false,
smooth: true,
symbol: 'circle',
symbolSize: 8,
symbolSize: 5,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
@@ -111,18 +116,26 @@ export function useLineChartOptions(options: any) {
color: colors.scene.primary.active,
},
itemStyle: {
color: colors.scene.primary.normal,
borderWidth: 1,
color: colors.bg.middle,
borderColor: colors.scene.primary.active,
opacity: 0,
},
animationDuration: 600 ,
emphasis: {
itemStyle: {
opacity: 1,
},
},
animationDuration: 600,
},
],
};

// const variantOptions = merge(defaultOptions, detailOptions);
const finalOptions = merge(defaultOptions, options);

setFinalOptions(finalOptions);
}, [colors, options, colorMode]);
}, [colors, options, colorMode, noData]);

return finalOptions;
}
Original file line number Diff line number Diff line change
@@ -3,8 +3,9 @@ import { Flex } from '@totejs/uikit';
import { trimAddress, trimLongStr } from '@/utils/string';
import { CloseIcon } from '@totejs/icons';
import * as React from 'react';
import { ADDRESS_RE } from '@/utils/constant';
// import { ADDRESS_RE } from '@/constants/legacy';
import { IconFont } from '@/components/IconFont';
import { ADDRESS_RE } from '@/constants/legacy';

export type CustomTagProps = {
label: React.ReactNode;
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Flex, Text } from '@totejs/uikit';
import React, { ReactNode } from 'react';
import { IconFont } from '@/components/IconFont';
import { DISCONTINUED_BANNER_HEIGHT, DISCONTINUED_BANNER_MARGIN_BOTTOM } from '@/utils/constant';
import { DISCONTINUED_BANNER_HEIGHT, DISCONTINUED_BANNER_MARGIN_BOTTOM } from '@/constants/legacy';

export const DiscontinueBanner = ({
content,
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
import { Tips } from '@/components/common/Tips';
import { DCInputNumber } from '@/components/common/DCInputNumber';
import { DCTooltip } from '@/components/common/DCTooltip';
import { G_BYTES } from '@/utils/constant';
import { G_BYTES } from '@/constants/legacy';
import { selectStoreFeeParams, setupStoreFeeParams } from '@/store/slices/global';
import { useAppDispatch, useAppSelector } from '@/store';
import { formatByGB } from '@/utils/string';
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import { DCMenu } from '@/components/common/DCMenu';
import { MenuOption } from '@/components/common/DCMenuList';
import { IconFont } from '@/components/IconFont';
import { DCButton } from '@/components/common/DCButton';
import { InternalRoutePaths } from '@/utils/constant';
import { InternalRoutePaths } from '@/constants/paths';

interface TNetwork extends MenuOption {
label: string;
Loading