@oanda/labs-live-rates-table-widget 1.0.49 → 1.0.50

package/src/LiveRatesTableWidget/components/CardWithData/CardWithData.tsx

@@ -1,133 +0,0 @@
-import {
-  ArrowPosition,
-  Card,
-  CardHeader,
-  CardRow,
-  LineChartSize,
-  Price,
-  Truncate,
-} from '@oanda/labs-widget-common';
-import { useLocale } from '@oanda/mono-i18n';
-import React from 'react';
-
-import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
-import type { CardWithDataProps } from '../../types';
-import { ColumnsNames } from '../../types';
-import { useRecords } from '../../utils';
-import { LineChartWithData } from '../LineChartWithData';
-
-const CardWithData = ({
-  isLoading,
-  record,
-  target,
-  activeColumns,
-  index,
-  division,
-  isLast,
-}: CardWithDataProps) => {
-  const { updatedRecord, error, ref } = useRecords(
-    record,
-    record.instrument ? target : null
-  );
-  const { lang } = useLocale();
-
-  const checkLoading = (id: string) =>
-    isLoading || (!error && updatedRecord?.[id] === undefined);
-
-  return (
-    <Card ref={ref} data-testid="card" withoutBottomBorder={!isLast}>
-      <CardHeader
-        isLoading={isLoading}
-        number={index}
-        title={
-          <Truncate
-            text={record.displayName}
-            tooltipId={INSTRUMENT_TOOLTIP_ID}
-          />
-        }
-      >
-        {activeColumns.includes(ColumnsNames.CHART) && (
-          <LineChartWithData
-            division={division}
-            isLoading={checkLoading('instrument')}
-            padding={4}
-            record={updatedRecord}
-            size={LineChartSize.xs}
-          />
-        )}
-      </CardHeader>
-      {activeColumns.map((item) => {
-        if (item === ColumnsNames.SELL) {
-          return (
-            <CardRow
-              key={ColumnsNames.SELL}
-              isError={!!error}
-              isLoading={checkLoading(ColumnsNames.SELL)}
-              label={lang('sell_price')}
-            >
-              <Price
-                arrowPosition={ArrowPosition.left}
-                movementIndicator="arrow"
-                priceMovement={updatedRecord.sellPriceMovement}
-              >
-                <span>
-                  {updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}
-                </span>
-              </Price>
-            </CardRow>
-          );
-        }
-
-        if (item === ColumnsNames.BUY) {
-          return (
-            <CardRow
-              key={ColumnsNames.BUY}
-              isError={!!error}
-              isLoading={checkLoading(ColumnsNames.BUY)}
-              label={lang('buy_price')}
-            >
-              <Price
-                arrowPosition={ArrowPosition.left}
-                movementIndicator="arrow"
-                priceMovement={updatedRecord.buyPriceMovement}
-              >
-                <span>
-                  {updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}
-                </span>
-              </Price>
-            </CardRow>
-          );
-        }
-
-        if (item === ColumnsNames.DAILY_CHANGE) {
-          return (
-            <CardRow
-              key={ColumnsNames.DAILY_CHANGE}
-              isError={!!error}
-              isLoading={checkLoading('dailyPercentChange')}
-              label={lang('daily_percent_change')}
-            >
-              <span>{updatedRecord.dailyPercentChange}</span>
-            </CardRow>
-          );
-        }
-
-        if (item === ColumnsNames.SPREAD) {
-          return (
-            <CardRow
-              key={ColumnsNames.SPREAD}
-              isError={!!error}
-              isLoading={checkLoading(ColumnsNames.SPREAD)}
-              label={lang('spread')}
-            >
-              <span>{updatedRecord.spread}</span>
-            </CardRow>
-          );
-        }
-        return null;
-      })}
-    </Card>
-  );
-};
-
-export { CardWithData };

package/src/LiveRatesTableWidget/components/CardWithData/index.ts

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

package/src/LiveRatesTableWidget/components/Cards/Cards.tsx

@@ -1,44 +0,0 @@
-import { Card, ChartError } from '@oanda/labs-widget-common';
-import React from 'react';
-
-import { CardWithData } from '../CardWithData/CardWithData';
-import type { CardsProps } from './types';
-
-const Cards = ({
-  records,
-  target,
-  columns,
-  isError,
-  isLoading,
-  division,
-  startIndex = 0,
-}: CardsProps) => (
-  <>
-    {isError ? (
-      <Card>
-        <div className="lw-flex lw-h-[150px] lw-w-full lw-items-center lw-justify-center">
-          <ChartError />
-        </div>
-      </Card>
-    ) : (
-      <>
-        {records.map((record, index) => (
-          <div key={`card_${startIndex + index}`}>
-            <CardWithData
-              activeColumns={columns}
-              division={division}
-              index={startIndex + index + 1}
-              isError={isError}
-              isLast={index + 1 === records.length}
-              isLoading={isLoading}
-              record={record}
-              target={target}
-            />
-          </div>
-        ))}
-      </>
-    )}
-  </>
-);
-
-export { Cards };

package/src/LiveRatesTableWidget/components/Cards/index.ts

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

package/src/LiveRatesTableWidget/components/Cards/types.tsx

@@ -1,13 +0,0 @@
-import type { Division } from '../../../gql/types/graphql';
-import type { ColumnsNames, DataRecord } from '../../types';
-
-export interface CardsProps {
-  startIndex?: number;
-  emptyCardsCount?: number;
-  isLoading?: boolean;
-  isError?: boolean;
-  records: DataRecord[];
-  target: EventTarget | null;
-  columns: ColumnsNames[];
-  division: Division;
-}

package/src/LiveRatesTableWidget/components/LineChartWithData/LineChartWithData.tsx

@@ -1,53 +0,0 @@
-import { useQuery } from '@apollo/client';
-import { LineChart, Loader, LoaderSize } from '@oanda/labs-widget-common';
-import React from 'react';
-
-import { getInstrumentsChart } from '../../../gql/getInstrumentsChart';
-import type {
-  GetInstrumentsChartQuery,
-  GetInstrumentsChartQueryVariables,
-} from '../../../gql/types/graphql';
-import type { LineChartWithDataProps } from './types';
-import { getChartColor } from './utils';
-
-const LineChartWithData = ({
-  padding,
-  record,
-  size,
-  isLoading,
-  division,
-  isDarkMode = false,
-}: LineChartWithDataProps) => {
-  const { loading, data } = useQuery<
-    GetInstrumentsChartQuery,
-    GetInstrumentsChartQueryVariables
-  >(getInstrumentsChart, {
-    variables: {
-      instruments: [record.instrument],
-      division,
-    },
-    fetchPolicy: 'network-only',
-    skip: !record.instrument,
-  });
-
-  const showLoader = isLoading || loading;
-  const chart = data?.topicalInstrumentsCharts?.[0].chart || [];
-
-  const chartColor = getChartColor(record.dailyPercentChange, isDarkMode);
-
-  return (
-    <>
-      {showLoader && <Loader size={LoaderSize.md} />}
-      {!showLoader && (
-        <LineChart
-          color={chartColor}
-          data={chart}
-          padding={padding}
-          size={size}
-        />
-      )}
-    </>
-  );
-};
-
-export { LineChartWithData };

package/src/LiveRatesTableWidget/components/LineChartWithData/index.ts

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

package/src/LiveRatesTableWidget/components/LineChartWithData/types.tsx

@@ -1,13 +0,0 @@
-import type { LineChartSize } from '@oanda/labs-widget-common';
-
-import type { Division } from '../../../gql/types/graphql';
-import type { DataRecord } from '../../types';
-
-export interface LineChartWithDataProps {
-  padding?: number;
-  record: DataRecord;
-  size?: LineChartSize;
-  isLoading: boolean;
-  division: Division;
-  isDarkMode?: boolean;
-}

package/src/LiveRatesTableWidget/components/LineChartWithData/utils.ts

@@ -1,14 +0,0 @@
-import { Theme, themeColors } from '@oanda/labs-widget-common';
-
-export const getChartColor = (dailyChange?: string, isDarkMode?: boolean) => {
-  const theme = isDarkMode ? Theme.Dark : Theme.Light;
-
-  switch (dailyChange?.charAt(0)) {
-    case '+':
-      return themeColors.ok[theme];
-    case '-':
-      return themeColors.danger[theme];
-    default:
-      return themeColors.borderDisabled[theme];
-  }
-};

package/src/LiveRatesTableWidget/components/RowWithData/RowWithData.tsx

@@ -1,150 +0,0 @@
-import {
-  LoaderSize,
-  Price,
-  TableCell,
-  TableRow,
-  Truncate,
-  useLayoutProvider,
-} from '@oanda/labs-widget-common';
-import classnames from 'classnames';
-import React from 'react';
-
-import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
-import type { RowWithDataProps } from '../../types';
-import { ColumnsNames } from '../../types';
-import { useRecords } from '../../utils';
-import { LineChartWithData } from '../LineChartWithData';
-
-const RowWithData = ({
-  loading,
-  record,
-  hasBackgroundColor,
-  target,
-  activeColumns,
-  division,
-  isScrolled,
-}: RowWithDataProps) => {
-  const { isDark } = useLayoutProvider();
-  const { updatedRecord, error, ref } = useRecords(
-    record,
-    record.instrument ? target : null
-  );
-
-  const checkLoading = (id: string) =>
-    loading || (!error && updatedRecord?.[id] === undefined);
-
-  return (
-    <TableRow
-      ref={ref}
-      hasBackgroundColor={hasBackgroundColor}
-      isScrolled={isScrolled}
-    >
-      <>
-        <TableCell
-          key={ColumnsNames.INSTRUMENT}
-          classNames={classnames('lw-font-bold', {
-            '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary':
-              isDark && isScrolled,
-          })}
-          isLoading={checkLoading(ColumnsNames.INSTRUMENT)}
-          type="text"
-        >
-          <Truncate
-            maxWidth={130}
-            text={record.displayName}
-            tooltipId={INSTRUMENT_TOOLTIP_ID}
-          />
-        </TableCell>
-        {activeColumns.map((item) => {
-          if (item === ColumnsNames.SELL) {
-            return (
-              <TableCell
-                key={ColumnsNames.SELL}
-                additionalPaddingRight
-                isError={!!error}
-                isLoading={checkLoading(ColumnsNames.SELL)}
-              >
-                <Price
-                  movementIndicator="arrow"
-                  priceMovement={updatedRecord.sellPriceMovement}
-                >
-                  <span>
-                    {updatedRecord.sell?.toFixed(
-                      updatedRecord.displayPrecision
-                    )}
-                  </span>
-                </Price>
-              </TableCell>
-            );
-          }
-
-          if (item === ColumnsNames.BUY) {
-            return (
-              <TableCell
-                key={ColumnsNames.BUY}
-                additionalPaddingRight
-                isError={!!error}
-                isLoading={checkLoading(ColumnsNames.BUY)}
-              >
-                <Price
-                  movementIndicator="arrow"
-                  priceMovement={updatedRecord.buyPriceMovement}
-                >
-                  <span>
-                    {updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}
-                  </span>
-                </Price>
-              </TableCell>
-            );
-          }
-
-          if (item === ColumnsNames.DAILY_CHANGE) {
-            return (
-              <TableCell
-                key={ColumnsNames.DAILY_CHANGE}
-                isError={!!error}
-                isLoading={checkLoading('dailyPercentChange')}
-              >
-                <span>{updatedRecord.dailyPercentChange}</span>
-              </TableCell>
-            );
-          }
-
-          if (item === ColumnsNames.CHART) {
-            return (
-              <td
-                key={ColumnsNames.CHART}
-                className="lw-relative lw-px-3 lw-py-0 lw-text-right"
-                data-testid="chart-table-cell"
-              >
-                <div className="lw-flex lw-justify-center">
-                  <LineChartWithData
-                    division={division}
-                    isLoading={checkLoading('instrument')}
-                    record={updatedRecord}
-                  />
-                </div>
-              </td>
-            );
-          }
-
-          if (item === ColumnsNames.SPREAD) {
-            return (
-              <TableCell
-                key={ColumnsNames.SPREAD}
-                isError={!!error}
-                isLoading={checkLoading(ColumnsNames.SPREAD)}
-                loaderSize={LoaderSize.sm}
-              >
-                <span>{updatedRecord.spread}</span>
-              </TableCell>
-            );
-          }
-          return null;
-        })}
-      </>
-    </TableRow>
-  );
-};
-
-export { RowWithData };

package/src/LiveRatesTableWidget/components/RowWithData/index.ts

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

package/src/LiveRatesTableWidget/components/index.ts

@@ -1,4 +0,0 @@
-export * from './Cards';
-export * from './CardWithData';
-export * from './LineChartWithData';
-export * from './RowWithData';

package/test/CardWithData.test.tsx

@@ -1,74 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { MockedProvider } from '@apollo/client/testing';
-import { MockLayoutProvider } from '@oanda/labs-widget-common';
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import { getInstrumentsChart } from '../src/gql/getInstrumentsChart';
-import { Division } from '../src/gql/types/graphql';
-import { CardWithData } from '../src/LiveRatesTableWidget/components/CardWithData';
-import { ColumnsNames } from '../src/LiveRatesTableWidget/types';
-
-const chartPointsMocks = [
-  {
-    request: {
-      query: getInstrumentsChart,
-      variables: {
-        instruments: ['EUR_USD'],
-        division: 'OC',
-      },
-    },
-    result: {
-      data: {
-        topicalInstrumentsCharts: [
-          {
-            name: 'EUR_USD',
-            displayName: 'EUR_USD',
-            chart: [
-              1.0544, 1.05704, 1.05716, 1.05596, 1.05556, 1.05556, 1.05238,
-              1.05292, 1.05443, 1.0544, 1.05704, 1.05716, 1.05596, 1.05556,
-              1.05556,
-            ],
-          },
-        ],
-      },
-    },
-  },
-];
-describe('CardWithData component', () => {
-  const record = {
-    instrument: 'EUR_USD',
-    displayName: 'EUR_USD',
-    buy: 1.04508,
-    sell: 1.04523,
-    spread: 1.2,
-    dailyPercentChange: '+3,23%',
-  };
-  const columns = [
-    ColumnsNames.SELL,
-    ColumnsNames.BUY,
-    ColumnsNames.DAILY_CHANGE,
-    ColumnsNames.CHART,
-    ColumnsNames.SPREAD,
-  ];
-  it('should render card', () => {
-    const { getByTestId, getAllByTestId } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <MockLayoutProvider>
-          <CardWithData
-            activeColumns={columns}
-            division={Division.Oc}
-            index={0}
-            record={record}
-            target={null}
-          />
-        </MockLayoutProvider>
-      </MockedProvider>
-    );
-    expect(getByTestId('card')).toBeInTheDocument();
-    expect(getByTestId('card-header')).toBeInTheDocument();
-    expect(getAllByTestId('card-row').length).toEqual(4);
-  });
-});

package/test/Cards.test.tsx

@@ -1,130 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { MockedProvider } from '@apollo/client/testing';
-import { MockLayoutProvider } from '@oanda/labs-widget-common';
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import { getInstrumentsChart } from '../src/gql/getInstrumentsChart';
-import { Division } from '../src/gql/types/graphql';
-import { Cards } from '../src/LiveRatesTableWidget/components';
-import { ColumnsNames } from '../src/LiveRatesTableWidget/types';
-
-const chartPointsMocks = [
-  {
-    request: {
-      query: getInstrumentsChart,
-      variables: {
-        instruments: ['EUR_USD'],
-        division: 'OC',
-      },
-    },
-    result: {
-      data: {
-        topicalInstrumentsCharts: [
-          {
-            name: 'EUR_USD',
-            displayName: 'EUR_USD',
-            chart: [
-              1.0544, 1.05704, 1.05716, 1.05596, 1.05556, 1.05556, 1.05238,
-              1.05292, 1.05443, 1.0544, 1.05704, 1.05716, 1.05596, 1.05556,
-              1.05556,
-            ],
-          },
-        ],
-      },
-    },
-  },
-  {
-    request: {
-      query: getInstrumentsChart,
-      variables: {
-        instruments: ['EUR_JPY'],
-        division: 'OC',
-      },
-    },
-    result: {
-      data: {
-        topicalInstrumentsCharts: [
-          {
-            name: 'EUR_JPY',
-            displayName: 'EUR_JPY',
-            chart: [
-              1.0544, 1.05704, 1.05716, 1.05596, 1.05556, 1.05556, 1.05238,
-              1.05292, 1.05443, 1.0544, 1.05704, 1.05716, 1.05596, 1.05556,
-              1.05556,
-            ],
-          },
-        ],
-      },
-    },
-  },
-];
-
-describe('Cards component', () => {
-  const records = [
-    {
-      instrument: 'EUR_USD',
-      displayName: 'EUR_USD',
-      buy: 1.04508,
-      sell: 1.04523,
-      spread: 1.2,
-      dailyPercentChange: '+3,23%',
-    },
-    {
-      instrument: 'EUR_JPY',
-      displayName: 'EUR_JPY',
-      buy: 1.04553,
-      sell: 1.045353,
-      spread: 1.3,
-      dailyPercentChange: '+4,23%',
-    },
-  ];
-  const columns = [
-    ColumnsNames.SELL,
-    ColumnsNames.BUY,
-    ColumnsNames.DAILY_CHANGE,
-    ColumnsNames.CHART,
-    ColumnsNames.SPREAD,
-  ];
-  it('should render card', () => {
-    const { getAllByTestId } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <MockLayoutProvider>
-          <Cards
-            columns={columns}
-            division={Division.Oc}
-            emptyCardsCount={2}
-            isError={false}
-            isLoading={false}
-            records={records}
-            target={null}
-          />
-        </MockLayoutProvider>
-      </MockedProvider>
-    );
-    expect(getAllByTestId('card').length).toEqual(2);
-    expect(getAllByTestId('card-header').length).toEqual(2);
-    expect(getAllByTestId('card-row').length).toEqual(8);
-  });
-  it('should render error', () => {
-    const { getAllByTestId } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <MockLayoutProvider>
-          <Cards
-            isError
-            columns={columns}
-            division={Division.Oc}
-            emptyCardsCount={2}
-            isLoading={false}
-            records={records}
-            target={null}
-          />
-        </MockLayoutProvider>
-      </MockedProvider>
-    );
-    expect(getAllByTestId('card').length).toEqual(1);
-    expect(getAllByTestId('chart-error').length).toEqual(1);
-  });
-});