chore: fix lint

apps/trading/client-pages/market/market-header-stats.tsx

@@ -43,7 +43,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
   const asset = getAsset(market);
 
   return (
-    <>
+    <div className="flex gap-8">
       <HeaderStat heading={t('Mark Price')} testId="market-price">
         <MarketMarkPrice
           marketId={market.id}
@@ -144,7 +144,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
         </HeaderStat>
       )}
       <MarketProposalNotification marketId={market.id} />
-    </>
+    </div>
   );
 };
 

apps/trading/components/header/header.tsx

@@ -17,11 +17,11 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => {
   );
   return (
     <header className={headerClasses}>
-      <div className="flex-col items-start justify-center hidden pt-2 pb-0 pl-3 lg:flex lg:pl-4 xl:pb-2">
+      <div className="hidden lg:flex flex-col justify-center items-start pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0">
         {title}
       </div>
       <div data-testid="header-summary" className="min-w-0">
-        <div className="flex items-center px-3 py-2 overflow-x-auto text-xs lg:px-4 flex-nowrap gap-6">
+        <div className="px-3 lg:px-4 py-2 flex flex-nowrap gap-4 items-center text-xs overflow-x-auto">
           {children}
         </div>
       </div>
@@ -70,7 +70,7 @@ export const HeaderTitle = ({ children }: { children: ReactNode }) => {
   return (
     <h1
       data-testid="header-title"
-      className="flex items-center text-lg gap-4 whitespace-nowrap xl:pr-4 xl:border-r border-default"
+      className="flex gap-4 items-center text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default"
     >
       {children}
     </h1>

apps/trading/components/layouts/layout-with-sidebar.tsx

@@ -40,12 +40,9 @@ export const LayoutWithSidebar = () => {
       </main>
       <aside
         // min-h-0 is needed as this element is part of a grid, we want the content to be scrollable, without it it will push the grid element taller
-        className={classNames(
-          'col-start-1 lg:col-start-2 min-h-0 lg:border-l border-default lg:bg-vega-clight-800 dark:lg:bg-vega-cdark-800',
-          {
-            hidden: !sidebarOpen,
-          }
-        )}
+        className={classNames('col-start-1 lg:col-start-2 min-h-0', {
+          hidden: !sidebarOpen,
+        })}
       >
         <SidebarContent />
       </aside>

apps/trading/components/market-header/market-header.tsx

@@ -28,11 +28,12 @@ export const MarketHeader = () => {
             <HeaderTitle>
               <span>
                 {data.tradableInstrument.instrument.code}
-                <span className="ml-1 text-xs uppercase text-muted">
+                <span className="ml-2 text-xs uppercase text-muted">
+                  {' '}
                   {data.tradableInstrument.instrument.product.__typename &&
                     ProductTypeShortName[
                       data.tradableInstrument.instrument.product.__typename
-                    ]}
+                    ]}{' '}
                 </span>
               </span>
               <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />

libs/ui-toolkit/src/components/sparkline/sparkline.spec.tsx

@@ -1,68 +1,77 @@
 import { render, screen } from '@testing-library/react';
+
 import { Sparkline } from './sparkline';
-import type { SparklineProps } from './sparkline';
 
-describe('Sparkline', () => {
-  let props: SparklineProps = {
-    data: [],
-  };
+const props = {
+  data: [
+    1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
+    10, 11, 12,
+  ],
+  muted: true,
+};
 
-  beforeEach(() => {
-    props = {
-      data: [
-        1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8,
-        9, 10, 11, 12,
-      ],
-    };
-  });
+it('Renders an svg with a single path', () => {
+  render(<Sparkline {...props} />);
+  expect(screen.getByTestId('sparkline-svg')).toBeInTheDocument();
+  const paths = screen.getAllByTestId('sparkline-path');
+  const path = paths[0];
+  expect(path).toBeInTheDocument();
+  expect(path).toHaveAttribute('d', expect.any(String));
+  expect(path).toHaveAttribute('stroke', expect.any(String));
+  expect(path).toHaveAttribute('stroke-width', '1');
+  expect(path).toHaveAttribute('fill', 'transparent');
+});
 
-  it('Renders an svg with a single path', () => {
-    render(<Sparkline {...props} />);
-    expect(screen.getByTestId('sparkline-svg')).toBeInTheDocument();
-    const paths = screen.getAllByTestId('sparkline-path');
-    const path = paths[0];
-    expect(path).toBeInTheDocument();
-    expect(path).toHaveAttribute('d', expect.any(String));
-    expect(path).toHaveAttribute('stroke-width', '1');
-  });
+it('Requires a data prop but width and height are optional', () => {
+  render(<Sparkline {...props} />);
+  const svg = screen.getByTestId('sparkline-svg');
+  expect(svg).toHaveAttribute('width', '60');
+  expect(svg).toHaveAttribute('height', '15');
+});
 
-  it('Requires a data prop but width and height are optional', () => {
-    render(<Sparkline {...props} />);
-    const svg = screen.getByTestId('sparkline-svg');
-    expect(svg).toHaveAttribute('width', '60');
-    expect(svg).toHaveAttribute('height', '15');
-  });
+it('Renders a red line if the last value is less than the first', () => {
+  props.data[0] = 10;
+  props.data[props.data.length - 1] = 5;
+  render(<Sparkline {...props} />);
+  const paths = screen.getAllByTestId('sparkline-path');
+  const path = paths[0];
+  expect(path).toHaveClass(
+    '[vector-effect:non-scaling-stroke] stroke-market-red dark:stroke-market-red'
+  );
+});
 
-  it('Renders a red line if the last value is less than the first', () => {
-    props.data[0] = 10;
-    props.data[props.data.length - 1] = 5;
-    render(<Sparkline {...props} />);
-    const paths = screen.getAllByTestId('sparkline-path');
-    const path = paths[0];
-    expect(path).toHaveClass(
-      '[vector-effect:non-scaling-stroke] stroke-market-red dark:stroke-market-red'
-    );
-  });
+it('Renders a green line if the last value is greater than the first', () => {
+  props.data[0] = 5;
+  props.data[props.data.length - 1] = 10;
+  props.muted = true;
+  render(<Sparkline {...props} />);
+  const paths = screen.getAllByTestId('sparkline-path');
+  const path = paths[0];
+  expect(path).toHaveClass(
+    '[vector-effect:non-scaling-stroke] stroke-market-green-600 dark:stroke-market-green'
+  );
+});
 
-  it('Renders a green line if the last value is greater than the first', () => {
-    props.data[0] = 5;
-    props.data[props.data.length - 1] = 10;
-    render(<Sparkline {...props} />);
-    const paths = screen.getAllByTestId('sparkline-path');
-    const path = paths[0];
-    expect(path).toHaveClass(
-      '[vector-effect:non-scaling-stroke] stroke-market-green-600 dark:stroke-market-green'
-    );
-  });
+it('Renders a white line if the first and last values are equal', () => {
+  props.data[0] = 5;
+  props.data[props.data.length - 1] = 5;
+  render(<Sparkline {...props} />);
+  const paths = screen.getAllByTestId('sparkline-path');
+  const path = paths[0];
+  expect(path).toHaveClass(
+    '[vector-effect:non-scaling-stroke] stroke-black/40 dark:stroke-white/40'
+  );
+});
 
-  it('Renders a white line if the first and last values are equal', () => {
-    props.data[0] = 5;
-    props.data[props.data.length - 1] = 5;
-    render(<Sparkline {...props} />);
-    const paths = screen.getAllByTestId('sparkline-path');
-    const path = paths[0];
-    expect(path).toHaveClass(
-      '[vector-effect:non-scaling-stroke] stroke-black/40 dark:stroke-white/40'
-    );
-  });
+it('Renders a gray line if there are not 24 values', () => {
+  props.data = [
+    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
+    22, 23,
+  ];
+  render(<Sparkline {...props} />);
+  const paths = screen.queryAllByTestId('sparkline-path');
+  expect(paths).toHaveLength(2);
+  expect(paths[0]).toHaveClass(
+    '[vector-effect:non-scaling-stroke] stroke-black/40 dark:stroke-white/40'
+  );
 });

libs/ui-toolkit/src/components/sparkline/sparkline.stories.tsx

@@ -8,49 +8,39 @@ export default {
 
 const Template: Story = (args) => <Sparkline data={args['data']} {...args} />;
 
+export const Grey = Template.bind({});
+Grey.args = {
+  data: [
+    1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8,
+  ],
+  width: 60,
+  height: 30,
+  points: 25,
+  className: 'w-[113px]',
+};
+
 export const Equal = Template.bind({});
 Equal.args = {
   data: [
     12, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
     10, 11, 12,
   ],
-  width: 110,
+  width: 60,
   height: 30,
+  points: 25,
+  className: 'w-[113px]',
 };
 
 export const Increase = Template.bind({});
 Increase.args = {
   data: [
-    22,
-    22,
-    22, // extra values should be ignored, this should still render an increase
-    0,
-    2,
-    3,
-    4,
-    5,
-    13,
-    14,
-    15,
-    16,
-    17,
-    18,
-    19,
-    20,
-    21,
-    22,
-    23,
-    24,
-    6,
-    7,
-    8,
-    9,
-    10,
-    11,
-    12,
+    1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
+    10, 11, 12,
   ],
-  width: 110,
+  width: 60,
   height: 30,
+  points: 25,
+  className: 'w-[113px]',
 };
 
 export const Decrease = Template.bind({});
@@ -59,27 +49,8 @@ Decrease.args = {
     12, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
     10, 11, 1,
   ],
-  width: 110,
-  height: 30,
-};
-
-export const LessThan24HoursIncrease = Template.bind({});
-LessThan24HoursIncrease.args = {
-  data: [20, 21, 22, 25, 24, 24, 22, 19, 20, 22, 23, 27],
-  width: 110,
-  height: 30,
-};
-
-export const LessThan24HoursDecrease = Template.bind({});
-LessThan24HoursDecrease.args = {
-  data: [20, 21, 22, 23, 24, 6, 7, 9, 11, 13, 11, 9],
-  width: 110,
-  height: 30,
-};
-
-export const NoData = Template.bind({});
-NoData.args = {
-  data: [],
-  width: 110,
+  width: 60,
   height: 30,
+  points: 25,
+  className: 'w-[113px]',
 };

libs/ui-toolkit/src/components/sparkline/sparkline.tsx

@@ -1,25 +1,15 @@
 import { extent } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
-import { area, line } from 'd3-shape';
+import { line } from 'd3-shape';
 import isEqual from 'lodash/isEqual';
 import React from 'react';
 
 function colorByChange(a: number, b: number) {
-  if (a < b) {
-    return 'stroke-market-green-600 dark:stroke-market-green';
-  } else if (a > b) {
-    return 'stroke-market-red dark:stroke-market-red';
-  }
-  return 'stroke-black/40 dark:stroke-white/40';
-}
-
-function shadedColor(a: number, b: number) {
-  if (a < b) {
-    return 'fill-market-green-600 dark:fill-market-green';
-  } else if (a > b) {
-    return 'fill-market-red-600 dark:fill-market-red';
-  }
-  return 'fill-black dark:fill-white';
+  return a === b
+    ? 'stroke-black/40 dark:stroke-white/40'
+    : a < b
+    ? 'stroke-market-green-600 dark:stroke-market-green'
+    : 'stroke-market-red dark:stroke-market-red';
 }
 
 export interface SparklineProps {
@@ -28,60 +18,75 @@ export interface SparklineProps {
   height?: number;
   points?: number;
   className?: string;
+  muted?: boolean;
 }
 
 export const SparklineView = ({
   data,
   width = 60,
   height = 15,
-  points = 24,
+  points = 25,
+  muted = false,
   className,
 }: SparklineProps) => {
+  // How many points are missing. If market is 12 hours old the 25 - 12
+  const preMarketLength = points - data.length;
+
+  // Create two dimensional array for sparkline points [x, y]
+  const marketData: [number, number][] = data.map((d, i) => [
+    preMarketLength + i,
+    d,
+  ]);
+  // Empty two dimensional array for gray, 'no data' line
+  let preMarketData: [number, number][] = [];
+
   // Get the extent for our y value
-  const [min, max] = extent(data, (d) => d);
+  const [min, max] = extent(marketData, (d) => d[1]);
 
   if (typeof min !== 'number' || typeof max !== 'number') {
     return null;
   }
 
-  const midValue = (min + max) / 2;
+  // Create a second set of data to render a gray line for any
+  // missing points if the market is less than 24 hours old
+  if (marketData.length < points) {
+    // Populate preMarketData with the average of our extents
+    // so that the line renders centered vertically
+    const fillValue = (min + max) / 2;
+    preMarketData = new Array(points - marketData.length)
+      .fill(fillValue)
+      .map((d: number, i) => [i, d] as [number, number]);
 
-  // Market may be less than 24hr old so padd the data array
-  // with values that is the mid value (avg of min and max).
-  // This will rendera  horizontal line until the real data shifts the line
-  const padCount = data.length < points ? points - data.length : 0;
-  const padArr = new Array(padCount).fill(midValue);
-  const trimmedData = data.slice(-points);
+    // Add the first point of or market data so that the two
+    // lines join up
+    preMarketData.push(marketData[0] as [number, number]);
+  }
 
-  // Get the last 24 values if data has more than needed
-  const lineData: [number, number][] = [...padArr, ...trimmedData].map(
-    (d, i) => {
-      return [i, d];
-    }
-  );
-
-  const xScale = scaleLinear().domain([0, points]).range([0, width]);
-  const yScale = scaleLinear().domain([min, max]).range([height, 0]);
+  const xScale = scaleLinear().domain([0, points]).range([0, 100]);
+  const yScale = scaleLinear().domain([min, max]).range([100, 0]);
 
   const lineSeries = line()
     .x((d) => xScale(d[0]))
     .y((d) => yScale(d[1]));
 
-  const areaSeries = area()
-    .x((d) => xScale(d[0]))
-    .y0(height)
-    .y1((d) => yScale(d[1]));
-
-  const firstVal = trimmedData[0];
-  const lastVal = trimmedData[trimmedData.length - 1];
-
-  // Get the color of the marketData line depending on market movement
-  const strokeClassName = colorByChange(firstVal, lastVal);
-  const areaClassName = shadedColor(firstVal, lastVal);
+  // Get the color of the marketData line
+  const [firstVal, lastVal] = [data[0], data[data.length - 1]];
+  const strokeClassName = muted
+    ? data.length >= 24
+      ? colorByChange(firstVal, lastVal)
+      : 'stroke-black/40 dark:stroke-white/40'
+    : colorByChange(firstVal, lastVal);
 
   // Create paths
-  const linePath = lineSeries(lineData);
-  const areaPath = areaSeries(lineData);
+  const preMarketCreationPath = lineSeries(preMarketData);
+  const mainPath = lineSeries(marketData);
+  const pathProps = {
+    'data-testid': 'sparkline-path',
+    className: `[vector-effect:non-scaling-stroke] ${strokeClassName}`,
+    stroke: 'strokeCurrent',
+    strokeWidth: 1,
+    fill: 'transparent',
+  };
 
   return (
     <svg
@@ -89,25 +94,13 @@ export const SparklineView = ({
       className={className}
       width={width}
       height={height}
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox="0 0 100 100"
       preserveAspectRatio="none"
     >
-      {linePath && (
-        <path
-          d={linePath}
-          data-testid="sparkline-path"
-          className={`[vector-effect:non-scaling-stroke] fill-transparent ${strokeClassName}`}
-          strokeWidth={1}
-        />
-      )}
-      {areaPath && (
-        <path
-          className={areaClassName}
-          fillOpacity={0.2}
-          stroke="none"
-          d={areaPath}
-        />
+      {preMarketCreationPath && (
+        <path {...pathProps} d={preMarketCreationPath} />
       )}
+      {mainPath && <path {...pathProps} d={mainPath} />}
     </svg>
   );
 };