@oanda/labs-currency-power-balance-widget 1.0.1

package/dist/types/CurrencyPowerBalanceWidget/render.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/CurrencyPowerBalanceWidget/types.d.ts

@@ -0,0 +1,12 @@
+import { Theme } from '@oanda/labs-widget-common';
+import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
+export interface CurrencyPowerBalanceConfig {
+    graphqlUrl: string;
+    theme?: Theme;
+}
+export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {
+    renderElementId: string;
+}
+export interface ChartWithDataProps {
+    timeUnit: CurrencyPowerBalanceTimeUnit;
+}

package/dist/types/gql/getCurrencyPowerBalance.d.ts

@@ -0,0 +1 @@
+export declare const getCurrencyPowerBalance: import("@apollo/client").DocumentNode;

package/dist/types/gql/types/fragment-masking.d.ts

@@ -0,0 +1,15 @@
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { Incremental } from './graphql';
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<infer TType, any> ? [TType] extends [{
+    ' $fragmentName'?: infer TKey;
+}] ? TKey extends string ? {
+    ' $fragmentRefs'?: {
+        [key in TKey]: TType;
+    };
+} : never : never : never;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>): TType;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined): TType | null | undefined;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>): ReadonlyArray<TType>;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined): ReadonlyArray<TType> | null | undefined;
+export declare function makeFragmentData<F extends DocumentTypeDecoration<any, any>, FT extends ResultOf<F>>(data: FT, _fragment: F): FragmentType<F>;
+export declare function isFragmentReady<TQuery, TFrag>(queryNode: DocumentTypeDecoration<TQuery, any>, fragmentNode: TypedDocumentNode<TFrag>, data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined): data is FragmentType<typeof fragmentNode>;

package/dist/types/gql/types/gql.d.ts

@@ -0,0 +1,36 @@
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+declare const documents: {
+    "\n  query GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\n    }\n  }\n": DocumentNode<types.GetCurrencyPowerBalanceQuery, types.Exact<{
+        timeUnit: types.CurrencyPowerBalanceTimeUnit;
+    }>>;
+};
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export declare function graphql(source: string): unknown;
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export declare function graphql(source: "\n  query GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\n    }\n  }\n"];
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
+export {};

package/dist/types/gql/types/graphql.d.ts

@@ -0,0 +1,274 @@
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends {
+    [key: string]: unknown;
+}> = {
+    [K in keyof T]: T[K];
+};
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]?: Maybe<T[SubKey]>;
+};
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]: Maybe<T[SubKey]>;
+};
+export type MakeEmpty<T extends {
+    [key: string]: unknown;
+}, K extends keyof T> = {
+    [_ in K]?: never;
+};
+export type Incremental<T> = T | {
+    [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never;
+};
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+    ID: {
+        input: string;
+        output: string;
+    };
+    String: {
+        input: string;
+        output: string;
+    };
+    Boolean: {
+        input: boolean;
+        output: boolean;
+    };
+    Int: {
+        input: number;
+        output: number;
+    };
+    Float: {
+        input: number;
+        output: number;
+    };
+};
+export type AssetClass = {
+    __typename?: 'AssetClass';
+    instruments?: Maybe<Array<Maybe<Instrument>>>;
+    name?: Maybe<Scalars['String']['output']>;
+};
+export declare enum BookType {
+    Order = "ORDER",
+    Position = "POSITION"
+}
+export declare enum CurrencyName {
+    Aud = "AUD",
+    Cad = "CAD",
+    Chf = "CHF",
+    Eur = "EUR",
+    Gbp = "GBP",
+    Jpy = "JPY",
+    Nzd = "NZD",
+    Usd = "USD"
+}
+export type CurrencyPower = {
+    __typename?: 'CurrencyPower';
+    /** UTC Timestamp */
+    point: Scalars['String']['output'];
+    price: Scalars['Float']['output'];
+};
+export type CurrencyPowerBalance = {
+    __typename?: 'CurrencyPowerBalance';
+    currency: CurrencyName;
+    power: Array<CurrencyPower>;
+};
+export declare enum CurrencyPowerBalanceTimeUnit {
+    CurrentDay = "CURRENT_DAY",
+    H4 = "H4",
+    H8 = "H8",
+    H24 = "H24",
+    M1 = "M1",
+    M3 = "M3",
+    PreviousDay = "PREVIOUS_DAY",
+    W1 = "W1"
+}
+export declare enum DataSource {
+    Ny4 = "NY4",
+    Ty3 = "TY3"
+}
+export declare enum Division {
+    Oap = "OAP",
+    Oau = "OAU",
+    Oc = "OC",
+    Ocan = "OCAN",
+    Oel = "OEL",
+    Ogm = "OGM",
+    Oj = "OJ",
+    Otms = "OTMS"
+}
+export type Instrument = {
+    __typename?: 'Instrument';
+    displayName?: Maybe<Scalars['String']['output']>;
+    name?: Maybe<Scalars['String']['output']>;
+};
+export type OrderPositionBucket = {
+    __typename?: 'OrderPositionBucket';
+    longCountPercent: Scalars['Float']['output'];
+    price: Scalars['Float']['output'];
+    shortCountPercent: Scalars['Float']['output'];
+};
+export type OrderPositionData = {
+    __typename?: 'OrderPositionData';
+    bucketWidth: Scalars['Float']['output'];
+    buckets: Array<Maybe<OrderPositionBucket>>;
+    dataSource?: Maybe<Scalars['String']['output']>;
+    instrument: Scalars['String']['output'];
+    price: Scalars['Float']['output'];
+    region?: Maybe<Scalars['String']['output']>;
+    time: Scalars['String']['output'];
+    unixTime: Scalars['Int']['output'];
+};
+export type Query = {
+    __typename?: 'Query';
+    assetClasses?: Maybe<Array<Maybe<AssetClass>>>;
+    currencyPowerBalance?: Maybe<Array<CurrencyPowerBalance>>;
+    orderPositionBooks: Array<Maybe<OrderPositionData>>;
+    sentiment?: Maybe<Array<SentimentInstrument>>;
+    sentimentList?: Maybe<Array<SentimentInstrument>>;
+    topicalInstruments?: Maybe<Array<TopicalInstrument>>;
+    topicalInstrumentsCharts?: Maybe<Array<TopicalInstrumentChart>>;
+    topicalInstrumentsTotalCount: Scalars['Int']['output'];
+    volatilityChart?: Maybe<Array<Maybe<VolatilityChart>>>;
+    volatilityChartAssetClasses?: Maybe<Array<VolatilityChartAssetClass>>;
+};
+export type QueryAssetClassesArgs = {
+    division: Division;
+};
+export type QueryCurrencyPowerBalanceArgs = {
+    timeUnit: CurrencyPowerBalanceTimeUnit;
+};
+export type QueryOrderPositionBooksArgs = {
+    bookType: BookType;
+    dataSource?: InputMaybe<DataSource>;
+    instrument: Scalars['String']['input'];
+    recentHours?: InputMaybe<Scalars['Int']['input']>;
+    region?: InputMaybe<Region>;
+};
+export type QuerySentimentArgs = {
+    division?: InputMaybe<Division>;
+    name: Scalars['String']['input'];
+};
+export type QuerySentimentListArgs = {
+    division?: InputMaybe<Division>;
+    sort?: InputMaybe<Sort>;
+};
+export type QueryTopicalInstrumentsArgs = {
+    count?: InputMaybe<Scalars['Int']['input']>;
+    division?: InputMaybe<Division>;
+    offset?: InputMaybe<Scalars['Int']['input']>;
+    sort: TopicalSort;
+};
+export type QueryTopicalInstrumentsChartsArgs = {
+    division?: InputMaybe<Division>;
+    instruments?: InputMaybe<Array<Scalars['String']['input']>>;
+};
+export type QueryTopicalInstrumentsTotalCountArgs = {
+    division?: InputMaybe<Division>;
+    sort: TopicalSort;
+};
+export type QueryVolatilityChartArgs = {
+    division?: InputMaybe<Division>;
+    instrument: Scalars['String']['input'];
+    timeSpan: VolatilityChartTimeSpan;
+    timeUnit: VolatilityChartTimeUnit;
+};
+export type QueryVolatilityChartAssetClassesArgs = {
+    division?: InputMaybe<Division>;
+};
+export declare enum Region {
+    Amer = "AMER",
+    Apac = "APAC",
+    Emea = "EMEA"
+}
+export type Sentiment = {
+    __typename?: 'Sentiment';
+    longPercent: Scalars['Float']['output'];
+    shortPercent: Scalars['Float']['output'];
+};
+export type SentimentInstrument = {
+    __typename?: 'SentimentInstrument';
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+    sentiment: Sentiment;
+};
+export declare enum Sort {
+    Bearish = "BEARISH",
+    Bullish = "BULLISH"
+}
+export type TopicalInstrument = {
+    __typename?: 'TopicalInstrument';
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+    sentiment: TopicalInstrumentSentiment;
+    updatedAt: Scalars['String']['output'];
+};
+export type TopicalInstrumentChart = {
+    __typename?: 'TopicalInstrumentChart';
+    chart?: Maybe<Array<Scalars['Float']['output']>>;
+    name: Scalars['String']['output'];
+};
+export type TopicalInstrumentSentiment = {
+    __typename?: 'TopicalInstrumentSentiment';
+    longPercent: Scalars['Float']['output'];
+    shortPercent: Scalars['Float']['output'];
+};
+export declare enum TopicalSort {
+    Bearish = "BEARISH",
+    Bullish = "BULLISH",
+    Hot = "HOT",
+    Popular = "POPULAR",
+    Volatile = "VOLATILE"
+}
+export type VolatilityChart = {
+    __typename?: 'VolatilityChart';
+    pips: Scalars['Float']['output'];
+    /** Time point - hour in format hh:mm, Date in UTC, Week in format 'Mo' */
+    point: Scalars['String']['output'];
+};
+export type VolatilityChartAssetClass = {
+    __typename?: 'VolatilityChartAssetClass';
+    instruments: Array<VolatilityChartInstrument>;
+    name: Scalars['String']['output'];
+};
+export type VolatilityChartInstrument = {
+    __typename?: 'VolatilityChartInstrument';
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+};
+export declare enum VolatilityChartTimeSpan {
+    D5 = "D5",
+    /**  Valid for: H */
+    D10 = "D10",
+    /**  Valid for: H */
+    M1 = "M1",
+    /**  Valid for: D */
+    M3 = "M3",
+    /**  Valid for: D */
+    W5 = "W5",
+    /**  Valid for: W */
+    W10 = "W10"
+}
+export declare enum VolatilityChartTimeUnit {
+    D = "D",
+    H = "H",
+    W = "W"
+}
+export type GetCurrencyPowerBalanceQueryVariables = Exact<{
+    timeUnit: CurrencyPowerBalanceTimeUnit;
+}>;
+export type GetCurrencyPowerBalanceQuery = {
+    __typename?: 'Query';
+    currencyPowerBalance?: Array<{
+        __typename?: 'CurrencyPowerBalance';
+        currency: CurrencyName;
+        power: Array<{
+            __typename?: 'CurrencyPower';
+            point: string;
+            price: number;
+        }>;
+    }> | null;
+};
+export declare const GetCurrencyPowerBalanceDocument: DocumentNode<GetCurrencyPowerBalanceQuery, Exact<{
+    timeUnit: CurrencyPowerBalanceTimeUnit;
+}>>;

package/dist/types/gql/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./fragment-masking";
+export * from "./gql";

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './CurrencyPowerBalanceWidget';

package/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@oanda/labs-currency-power-balance-widget",
+  "version": "1.0.1",
+  "description": "Labs Currency Power Balance Widget",
+  "main": "dist/main/index.js",
+  "module": "dist/module/index.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "codegen": "graphql-codegen --config codegen.ts"
+  },
+  "keywords": [],
+  "author": "OANDA",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@apollo/client": "3.7.17",
+    "@oanda/labs-widget-common": "^1.0.62",
+    "echarts": "5.4.3",
+    "echarts-for-react": "3.0.2",
+    "graphql": "16.7.1",
+    "usehooks-ts": "2.9.1"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/client-preset": "4.1.0"
+  },
+  "gitHead": "0954a60e9c2d28ec2c2d4240fc15fbf132f827d2"
+}

package/src/CurrencyPowerBalanceWidget/ChartWithData.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import {
+  ChartError, Spinner, SpinnerSize, Tooltip,
+} from '@oanda/labs-widget-common';
+import { useMediaQuery } from 'usehooks-ts';
+import { Chart } from './components/Chart';
+import { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from './constants';
+import { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';
+import { ChartWithDataProps } from './types';
+import { GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables } from '../gql/types/graphql';
+
+const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const { loading, data, error } = useQuery<
+  GetCurrencyPowerBalanceQuery,
+  GetCurrencyPowerBalanceQueryVariables
+  >(getCurrencyPowerBalance, {
+    variables: {
+      timeUnit,
+    },
+  });
+
+  const showChart = data?.currencyPowerBalance && data?.currencyPowerBalance?.length > 0;
+  const showError = data?.currencyPowerBalance?.length === 0 || error;
+
+  return (
+    <>
+      {loading
+      && (
+      <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
+        <Spinner size={SpinnerSize.lg} />
+      </div>
+      )}
+      {!loading && showChart && (
+        <Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} />
+      )}
+      {!loading && showError && (
+        <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
+          <ChartError />
+        </div>
+      )}
+      {isDesktop && <Tooltip id={CURRENCY_POWER_BALANCE_TOOLTIP_ID} />}
+    </>
+  );
+};
+
+export { ChartWithData };

package/src/CurrencyPowerBalanceWidget/CurrencyPowerBalance.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
+import { ThemeProvider } from '@oanda/labs-widget-common';
+import { Main } from './Main';
+import { CurrencyPowerBalanceConfig } from './types';
+
+const CurrencyPowerBalance = ({
+  graphqlUrl, theme,
+}: CurrencyPowerBalanceConfig) => {
+  const client = new ApolloClient({
+    uri: graphqlUrl,
+    cache: new InMemoryCache(),
+  });
+
+  return (
+    <ThemeProvider theme={theme}>
+      <ApolloProvider client={client}>
+        <Main />
+      </ApolloProvider>
+    </ThemeProvider>
+  );
+};
+
+export { CurrencyPowerBalance };

package/src/CurrencyPowerBalanceWidget/Main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tool } from './Tool';
+
+const Main = () => (
+  <>
+    <Tool />
+  </>
+);
+
+export { Main };

package/src/CurrencyPowerBalanceWidget/Tool.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { timeUnitConfig } from './config';
+import { TimeUnitSwitch } from './components/TimeUnitSwitch';
+import { ChartWithData } from './ChartWithData';
+import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
+
+const Tool = () => {
+  const [selectedTimeUnit, setSelectedTimeUnit] = useState(CurrencyPowerBalanceTimeUnit.CurrentDay);
+
+  return (
+    <div
+      data-testid="currency-power-balance-wrapper"
+      className="lw-flex lw-flex-col lw-overflow-hidden lw-text-sm lw-tracking-normal"
+    >
+      <TimeUnitSwitch
+        selected={selectedTimeUnit}
+        callback={setSelectedTimeUnit}
+        options={timeUnitConfig}
+      />
+      <ChartWithData
+        timeUnit={selectedTimeUnit}
+      />
+    </div>
+  );
+};
+
+export { Tool };

package/src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx

@@ -0,0 +1,45 @@
+import React, { useRef, useEffect, useContext } from 'react';
+import ReactECharts from 'echarts-for-react';
+import { registerTheme, EChartsType } from 'echarts';
+import { useMediaQuery } from 'usehooks-ts';
+import { Theme, ThemeContext, getChartTheme } from '@oanda/labs-widget-common';
+import {
+  CHART_HEIGHT,
+} from './options/constants';
+import { getResponsiveOption, getOption } from './options';
+import { ChartProps } from './types';
+
+registerTheme('dark_theme', getChartTheme(Theme.Dark));
+registerTheme('light_theme', getChartTheme(Theme.Light));
+
+const Chart = ({ values, timeUnit }: ChartProps) => {
+  const isDark = useContext(ThemeContext) === Theme.Dark;
+  const echartRef = useRef(null);
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const isMobile = useMediaQuery('(max-width: 479px');
+
+  useEffect(() => {
+    if (echartRef.current) {
+      // @ts-ignore
+      const echartInstance = echartRef.current.getEchartsInstance() as EChartsType;
+
+      echartInstance.setOption(
+        getResponsiveOption(isDesktop, isMobile, isDark),
+      );
+    }
+  }, [echartRef, isDesktop, isMobile, isDark]);
+
+  return (
+    <ReactECharts
+      ref={echartRef}
+      theme={isDark ? 'dark_theme' : 'light_theme'}
+      style={{
+        height: `${CHART_HEIGHT}px`,
+        width: '100%',
+      }}
+      option={getOption(values, timeUnit, isDark)}
+    />
+  );
+};
+
+export { Chart };

package/src/CurrencyPowerBalanceWidget/components/Chart/index.ts

@@ -0,0 +1 @@
+export * from './Chart';

package/src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx

@@ -0,0 +1,41 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+
+const X_LABEL_SIZE = 90;
+const X_LABEL_SIZE_MOBILE = 110;
+const Y_LABEL_SIZE_MOBILE = 35;
+const Y_LABEL_SIZE = 45;
+const CHART_WIDTH = 9999;
+const CHART_HEIGHT = 425;
+const LEGEND_HEIGHT = 50;
+const LEGEND_HEIGHT_MOBILE = 70;
+const VERTICAL_LINE_COUNT = 10;
+
+const COLOR_CONFIG = {
+  AUD: colorPalette.orange,
+  JPY: colorPalette.raspberryLight,
+  USD: colorPalette.greenLight,
+  EUR: colorPalette.turquoiseLight,
+  GBP: colorPalette.violetLight,
+  CHF: colorPalette.bottleGreen75Lighter,
+  CAD: colorPalette.midnight75Lighter,
+  NZD: colorPalette.gold,
+};
+
+const TOOLTIP_LINE_COLOR_CONFIG = {
+  DARK: colorPalette.orange,
+  LIGHT: colorPalette.bottleGreenDark,
+};
+
+export {
+  X_LABEL_SIZE,
+  X_LABEL_SIZE_MOBILE,
+  Y_LABEL_SIZE_MOBILE,
+  Y_LABEL_SIZE,
+  CHART_WIDTH,
+  CHART_HEIGHT,
+  LEGEND_HEIGHT,
+  LEGEND_HEIGHT_MOBILE,
+  VERTICAL_LINE_COUNT,
+  COLOR_CONFIG,
+  TOOLTIP_LINE_COLOR_CONFIG,
+};

package/src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts

@@ -0,0 +1,46 @@
+import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import { TooltipFormatterParams } from './types';
+
+const getDateAndTime = (param: string) => {
+  const dateAndTime = param.split('T');
+
+  return {
+    date: dateAndTime[0],
+    time: dateAndTime[1].substring(0, 5),
+  };
+};
+
+const dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;
+
+const dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;
+
+const xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {
+  const { date, time } = getDateAndTime(label);
+  const isDateFormat = timeUnit.startsWith('M') || timeUnit.startsWith('W') || time === '00:00';
+
+  return isDateFormat ? dateFormat(date) : time;
+};
+
+const tooltipFormatter = (values: TooltipFormatterParams[]) => {
+  const date = dateTimeFormat(getDateAndTime(values[0].value[0]));
+
+  const row = values
+    .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))
+    .map(({ marker, seriesName, value }) => `<div style="display:flex;align-items:center;">
+      <div style="display:flex;align-items:center;width:50px;margin-right:10px;">
+        ${marker}
+        <span>${seriesName}</span>
+      </div>
+      <span>${value[1]}</span>
+    </div>`);
+
+  return `<div style="display:flex; flex-direction:column;">
+    <p style="margin-bottom:5px;">${date}</p>
+    ${row.join('\n')}
+  </div>`;
+};
+
+export {
+  tooltipFormatter,
+  xAxisLabelFormatter,
+};