add area series

src/components/chart/Chart.stories.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story, ArgsTable, Source } from "@storybook/blocks";
 import Chart from "./ChartWrapper";
 import ChartWidget from "./ChartWidget";
-import { LineSeries, CandlestickSeries, HistogramSeries } from "./series";
+import { LineSeries, CandlestickSeries, HistogramSeries, AreaSeries } from "./series";
 import { getFigmaParameters } from "../../shared/ui/getFigmaParameters";
 
 <Meta title="Data display/Chart" component={Chart} />
@@ -84,6 +84,21 @@ export const lineData = [
   >
     <ChartWidget height={106} width={168} data={lineData} />
   </Story>
+  <Story name="Area chart">
+    <Template>
+      <AreaSeries
+        data={[
+          { time: "2018-12-22", value: 54 },
+          { time: "2018-12-23", value: 23 },
+          { time: "2018-12-24", value: 44 },
+          { time: "2018-12-25", value: 85 },
+          { time: "2018-12-26", value: 75 },
+          { time: "2018-12-27", value: 63 },
+          { time: "2018-12-28", value: 51 },
+        ]}
+      />
+    </Template>
+  </Story>
 </Canvas>
 
 <ArgsTable of={Chart} />

src/components/chart/series/AreaSeries.tsx

@@ -0,0 +1,18 @@
+import { ForwardedRef, forwardRef } from "react";
+import SeriesTemplate from "./SeriesTemplate";
+import { SeriesApiRef, SeriesProps } from "./types";
+
+const AreaSeriesRenderFunction = (
+  { children, ...rest }: SeriesProps<"Area">,
+  ref: ForwardedRef<SeriesApiRef<"Area">>
+) => {
+  return (
+    <SeriesTemplate type="Area" ref={ref} {...rest}>
+      {children}
+    </SeriesTemplate>
+  );
+};
+
+const AreaSeries = forwardRef(AreaSeriesRenderFunction);
+AreaSeries.displayName = "AreaSeries";
+export default AreaSeries;

src/components/chart/series/index.ts

@@ -1,4 +1,5 @@
 export { default as LineSeries } from "./LineSeries";
 export { default as HistogramSeries } from "./HistogramSeries";
 export { default as CandlestickSeries } from "./CandlestickSeries";
+export { default as AreaSeries } from "./AreaSeries";
 export * from "./types";

src/components/chart/series/seriesDefaultOptions.ts

@@ -5,6 +5,7 @@ import type {
   CandlestickSeriesPartialOptions,
   LineSeriesPartialOptions,
   SeriesType,
+  AreaSeriesPartialOptions,
 } from "lightweight-charts";
 import { COLORS } from "../../../shared";
 
@@ -42,6 +43,15 @@ const seriesHistogramDefaultOptions: HistogramSeriesPartialOptions = {
   base: 0,
 };
 
+const seriesAreaDefaultOptions: AreaSeriesPartialOptions = {
+  ...seriesBaseDefaultOptions,
+  topColor: COLORS.blue300,
+  bottomColor: "transparent",
+  lineColor: COLORS.blue300,
+  lineStyle: 0,
+  lineWidth: 2,
+};
+
 export const getSeriesDefaultOptions = (type: SeriesType) => {
   switch (type) {
     case "Candlestick":
@@ -50,6 +60,8 @@ export const getSeriesDefaultOptions = (type: SeriesType) => {
       return seriesLineDefaultOptions;
     case "Histogram":
       return seriesHistogramDefaultOptions;
+    case "Area":
+      return seriesAreaDefaultOptions;
     default:
       return {};
   }

src/components/chart/series/types.ts

@@ -8,7 +8,7 @@ import type {
 } from "lightweight-charts";
 import { ReactNode } from "react";
 
-export type SeriesType = Extract<NativeSeriesType, "Line" | "Candlestick" | "Histogram">;
+export type SeriesType = Extract<NativeSeriesType, "Line" | "Candlestick" | "Histogram" | "Area">;
 
 export type SeriesParameters<T extends SeriesType> = {
   data: SeriesDataItemTypeMap[T][];

src/components/chart/series/useInitSeries.ts

@@ -101,6 +101,9 @@ const addSeries = <T extends SeriesType>(chart: IChartApi, type: T) => {
     case "Histogram":
       series = chart.addHistogramSeries();
       break;
+    case "Area":
+      series = chart.addAreaSeries();
+      break;
     default:
       throw new Error(`Unknown series type: ${type}`);
   }