Merge pull request #1551 from bancorprotocol/issue-#1514

Draw Shapes

e2e/utils/simulator/CreateSimulationDriver.ts

@@ -97,7 +97,6 @@ export class CreateSimulationDriver {
 
   async fillDates(start: string, end: string) {
     const [from, to] = [dayjs(start).unix(), dayjs(end).unix()].sort();
-
     await this.page.getByTestId('date-picker-button').click();
     // Select date twice to force range to be 1 day long
     await this.selectDate(to);

src/components/common/datePicker/DateRangePicker.tsx

@@ -39,11 +39,12 @@ interface Props {
   end?: Date;
   onConfirm: (props: { start?: Date; end?: Date }) => void;
   setIsOpen: Dispatch<boolean>;
-  presets: DatePickerPreset[];
+  presets?: DatePickerPreset[];
   options?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect'>;
   required?: boolean;
   form?: string;
   disabled?: boolean;
+  className?: string;
 }
 
 const displayRange = (start?: Date, end?: Date) => {
@@ -70,7 +71,8 @@ export const DateRangePicker = memo(function DateRangePicker(
           ? 'border-white/60 active:border-white/80'
           : 'border-background-800 hover:border-background-700 active:border-background-600',
         props.disabled &&
-          'border-background-800 hover:border-background-800 active:border-background-800 cursor-not-allowed hover:bg-transparent'
+          'border-background-800 hover:border-background-800 active:border-background-800 cursor-not-allowed hover:bg-transparent',
+        props.className
       )}
       data-testid="date-picker-button"
       disabled={props.disabled}
@@ -133,7 +135,7 @@ const Content = (props: Props) => {
   );
   const [date, setDate] = useState(baseDate);
   const hasDates = !!(date?.from && date?.to);
-  const selectedPreset = props.presets.find((p) => {
+  const selectedPreset = props.presets?.find((p) => {
     if (!hasDates) return false;
     const from = subDays(now, p.days);
     return isSameDay(from, date?.from!) && isSameDay(date?.to!, now);
@@ -167,25 +169,27 @@ const Content = (props: Props) => {
   return (
     <div className="flex flex-col gap-20 p-20">
       <div className="gap-30 flex">
-        <div
-          role="radiogroup"
-          aria-label="presets"
-          className="hidden w-[200px] flex-col gap-5 md:flex"
-        >
-          {props.presets.map(({ label, days }) => (
-            <button
-              type="button"
-              role="radio"
-              key={days}
-              className="rounded-8 px-30 text-14 font-weight-500 hover:border-background-700 box-border border-2 border-transparent bg-clip-padding py-8 text-start [&[aria-checked=true]]:bg-black"
-              onClick={() => handlePreset(days)}
-              aria-checked={selectedPreset?.days === days}
-              data-testid="date-picker-button"
-            >
-              {label}
-            </button>
-          ))}
-        </div>
+        {!!props.presets && (
+          <div
+            role="radiogroup"
+            aria-label="presets"
+            className="hidden w-[200px] flex-col gap-5 md:flex"
+          >
+            {props.presets.map(({ label, days }) => (
+              <button
+                type="button"
+                role="radio"
+                key={days}
+                className="rounded-8 px-30 text-14 font-weight-500 hover:border-background-700 box-border border-2 border-transparent bg-clip-padding py-8 text-start [&[aria-checked=true]]:bg-black"
+                onClick={() => handlePreset(days)}
+                aria-checked={selectedPreset?.days === days}
+                data-testid="date-picker-button"
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+        )}
         <Calendar
           defaultMonth={subMonths(date?.to ?? new Date(), 1)}
           numberOfMonths={aboveBreakpoint('sm') ? 2 : 1}

src/components/common/tooltip/FloatTooltip.tsx

@@ -25,6 +25,7 @@ import {
   safePolygon,
 } from '@floating-ui/react';
 import type { Placement } from '@floating-ui/react';
+import { cn } from 'utils/helpers';
 
 interface FloatTooltipOptions {
   initialOpen?: boolean;
@@ -126,13 +127,13 @@ export const FloatTooltipContent = forwardRef<
   return (
     <FloatingPortal>
       <div
-        className="bg-background-800 rounded p-16"
         ref={ref}
         style={{
           ...context.floatingStyles,
           ...style,
         }}
         {...context.getFloatingProps(props)}
+        className={cn('bg-background-800 rounded p-16', props.className)}
       />
     </FloatingPortal>
   );

src/components/simulator/input/SimInputChart.tsx

@@ -1,30 +1,23 @@
 import { Link } from '@tanstack/react-router';
 import { buttonStyles } from 'components/common/button/buttonStyles';
 import { CarbonLogoLoading } from 'components/common/CarbonLogoLoading';
-import {
-  DateRangePicker,
-  datePickerPresets,
-} from 'components/common/datePicker/DateRangePicker';
 import { IconTitleText } from 'components/common/iconTitleText/IconTitleText';
-import { datePickerDisabledDays } from 'components/simulator/result/SimResultChartHeader';
 import {
   SimulatorInputOverlappingValues,
   SimulatorOverlappingInputDispatch,
 } from 'hooks/useSimulatorOverlappingInput';
 import { StrategyInputValues } from 'hooks/useStrategyInput';
 import {
   ChartPrices,
-  D3ChartCandlesticks,
   OnPriceUpdates,
 } from 'components/strategies/common/d3Chart';
 import { SimulatorType } from 'libs/routing/routes/sim';
 import { useCallback } from 'react';
 import { ReactComponent as IconPlus } from 'assets/icons/plus.svg';
-import { CandlestickData, D3ChartSettingsProps, D3ChartWrapper } from 'libs/d3';
-import { fromUnixUTC, toUnixUTC } from '../utils';
-import { startOfDay, sub } from 'date-fns';
+import { CandlestickData } from 'libs/d3';
 import { formatNumber } from 'utils/helpers';
 import { useMarketPrice } from 'hooks/useMarketPrice';
+import { D3PriceHistory } from 'components/strategies/common/d3Chart/D3PriceHistory';
 
 interface Props {
   state: StrategyInputValues | SimulatorInputOverlappingValues;
@@ -38,15 +31,6 @@ interface Props {
   simulationType: SimulatorType;
 }
 
-const chartSettings: D3ChartSettingsProps = {
-  width: 0,
-  height: 0,
-  marginTop: 0,
-  marginBottom: 40,
-  marginLeft: 0,
-  marginRight: 80,
-};
-
 export const SimInputChart = ({
   state,
   dispatch,
@@ -95,31 +79,19 @@ export const SimInputChart = ({
   );
 
   const onDatePickerConfirm = useCallback(
-    (props: { start?: Date; end?: Date }) => {
+    (props: { start?: string; end?: string }) => {
       if (!props.start || !props.end) return;
-      dispatch('start', toUnixUTC(props.start));
-      dispatch('end', toUnixUTC(props.end));
+      dispatch('start', props.start);
+      dispatch('end', props.end);
     },
     [dispatch]
   );
 
   return (
     <div className="align-stretch top-120 rounded-12 bg-background-900 fixed right-20 grid h-[calc(100vh-220px)] min-h-[500px] w-[calc(100%-500px)] flex-1 grid-rows-[auto_1fr] justify-items-stretch p-20">
-      <div className="mb-20 flex items-center justify-between">
+      <header className="mb-20 flex items-center justify-between">
         <h2 className="text-20 font-weight-500 mr-20">Price Chart</h2>
-        <DateRangePicker
-          defaultStart={startOfDay(sub(new Date(), { days: 364 }))}
-          defaultEnd={startOfDay(new Date())}
-          start={fromUnixUTC(state.start)}
-          end={fromUnixUTC(state.end)}
-          onConfirm={onDatePickerConfirm}
-          presets={datePickerPresets}
-          options={{
-            disabled: datePickerDisabledDays,
-          }}
-          required
-        />
-      </div>
+      </header>
       {isError && (
         <ErrorMsg
           base={state.baseToken?.address}
@@ -132,26 +104,20 @@ export const SimInputChart = ({
       )}
 
       {!!data && (
-        <D3ChartWrapper
-          settings={chartSettings}
-          className="rounded-12 self-stretch bg-black"
-          data-testid="price-chart"
-        >
-          {(dms) => (
-            <D3ChartCandlesticks
-              dms={dms}
-              prices={prices}
-              onPriceUpdates={onPriceUpdates}
-              data={data}
-              marketPrice={marketPrice}
-              bounds={bounds}
-              onDragEnd={onPriceUpdatesEnd}
-              isLimit={isLimit}
-              type={simulationType}
-              overlappingSpread={spread}
-            />
-          )}
-        </D3ChartWrapper>
+        <D3PriceHistory
+          className="self-stretch"
+          prices={prices}
+          onPriceUpdates={onPriceUpdates}
+          onDragEnd={onPriceUpdatesEnd}
+          onRangeUpdates={onDatePickerConfirm}
+          data={data}
+          marketPrice={marketPrice}
+          bounds={bounds}
+          isLimit={isLimit}
+          type={simulationType}
+          overlappingSpread={spread}
+          zoomBehavior="normal"
+        />
       )}
     </div>
   );

src/components/strategies/common/StrategyChartHistory.tsx

@@ -1,9 +1,7 @@
 import {
   ChartPrices,
-  D3ChartCandlesticks,
   OnPriceUpdates,
 } from 'components/strategies/common/d3Chart';
-import { D3ChartSettingsProps, D3ChartWrapper } from 'libs/d3';
 import { useSearch } from '@tanstack/react-router';
 import { useGetTokenPriceHistory } from 'libs/queries/extApi/tokenPrice';
 import { TradeSearch } from 'libs/routing';
@@ -17,17 +15,9 @@ import { NotFound } from 'components/common/NotFound';
 import { TradingviewChart } from 'components/tradingviewChart';
 import { Token } from 'libs/tokens';
 import { Activity } from 'libs/queries/extApi/activity';
-import config from 'config';
 import { SafeDecimal } from 'libs/safedecimal';
-
-const chartSettings: D3ChartSettingsProps = {
-  width: 0,
-  height: 0,
-  marginTop: 0,
-  marginBottom: 40,
-  marginLeft: 0,
-  marginRight: 80,
-};
+import { D3PriceHistory } from './d3Chart/D3PriceHistory';
+import config from 'config';
 
 const getBounds = (
   order0: BaseOrder,
@@ -151,28 +141,19 @@ export const StrategyChartHistory: FC<Props> = (props) => {
     );
   }
   return (
-    <D3ChartWrapper
-      settings={chartSettings}
-      className="rounded-12 flex-1 bg-black"
-      data-testid="price-chart"
-    >
-      {(dms) => (
-        <D3ChartCandlesticks
-          readonly={props.readonly}
-          dms={dms}
-          prices={prices}
-          onPriceUpdates={updatePrices}
-          data={data}
-          marketPrice={marketPrice}
-          bounds={bounds}
-          onDragEnd={updatePrices}
-          isLimit={props.isLimit}
-          type={type}
-          overlappingSpread={props.spread}
-          overlappingMarketPrice={marketPrice}
-          activities={activities}
-        />
-      )}
-    </D3ChartWrapper>
+    <D3PriceHistory
+      readonly={props.readonly}
+      prices={prices}
+      onPriceUpdates={updatePrices}
+      onDragEnd={updatePrices}
+      data={data}
+      marketPrice={marketPrice}
+      bounds={bounds}
+      isLimit={props.isLimit}
+      type={type}
+      overlappingSpread={props.spread}
+      activities={activities}
+      zoomBehavior={activities ? 'normal' : 'extended'}
+    />
   );
 };