[UIK-5931][d3-chart] added BenchmarkLine component

semcore/d3-chart/src/component/BenchmarkLine/BenchmarkLine.tsx

@@ -0,0 +1,75 @@
+import { Component, sstyled } from '@semcore/core';
+import React from 'react';
+
+import type { BenchmarkLineProps } from './BenchmarkLine.type';
+import style from './benckmarkLine.shadow.css';
+import createElement from '../../createElement';
+
+class BenchmarkLineRoot extends Component<BenchmarkLineProps> {
+  static style = style;
+
+  render() {
+    // @ts-ignore
+    const SLabel = this.Element;
+    const SLine = 'line';
+    const SRect = 'rect';
+    const SText = 'text';
+    const SGroup = 'g';
+
+    const {
+      styles,
+      theme,
+      benchmarkValue,
+      xScale,
+      yScale,
+      data,
+    } = this.asProps;
+
+    const y = yScale(benchmarkValue);
+
+    return sstyled(styles)(
+      <SGroup y={`${y}px`}>
+        <SLine
+          x1={0}
+          x2='100%'
+          y1={0}
+          y2={0}
+          strokeWidth={1}
+          strokeDasharray='4 4'
+          stroke={theme === 'accent' ? 'red' : 'black'}
+        />
+        <SLabel render='g'>
+          <path
+            d='M5 5L0 10L5 15Z'
+            fill={theme === 'accent' ? 'red' : 'black'}
+            stroke={theme === 'accent' ? 'red' : 'black'}
+            strokeWidth='2'
+            strokeLinejoin='round'
+          />
+          <SRect
+            x={4}
+            y={0}
+            width='86'
+            height='20'
+            rx='6'
+            fill={theme === 'accent' ? 'red' : 'black'}
+          />
+          <SText
+            x='45'
+            y='10'
+            fill='#FFF'
+
+            fontSize='12'
+            fontWeight='600'
+            textAnchor='middle'
+            dominantBaseline='central'
+          >
+            {benchmarkValue}
+          </SText>
+        </SLabel>
+      </SGroup>,
+    );
+  }
+}
+
+export const BenchmarkLine = createElement(BenchmarkLineRoot);

semcore/d3-chart/src/component/BenchmarkLine/BenchmarkLine.type.ts

@@ -0,0 +1,17 @@
+export type BenchmarkLineProps = {
+  /**
+   * Level of line
+   */
+  level: number;
+
+  /**
+   * Theme
+   * @default 'default'
+   */
+  theme: 'default' | 'accent';
+
+  /**
+   * Value to display
+   */
+  value: string | number | Date;
+};

semcore/d3-chart/src/component/BenchmarkLine/benckmarkLine.shadow.css

@@ -0,0 +1,12 @@
+
+SGroup {
+  transform: translate(0, 50%);
+}
+SGroup[y] {
+  transform: translate(0, var(--y));
+  transition: transform 0.2s ease-in-out;
+}
+
+SLabel {
+  transform: translate(calc(100% - 90px), -10px);
+}

semcore/d3-chart/src/component/Chart/AbstractChart.tsx

@@ -20,6 +20,7 @@ import { Plot, XAxis, YAxis } from '../..';
 import { makeDataHintsContainer } from '../../a11y/hints';
 import style from '../../style/abstract-chart.shadow.css';
 import { interpolateValue } from '../../utils';
+import { BenchmarkLine } from '../BenchmarkLine/BenchmarkLine';
 import ChartLegend, { ChartLegendTable } from '../ChartLegend';
 import type { LegendFlexProps } from '../ChartLegend/LegendFlex/LegendFlex.type';
 import type { LegendItem } from '../ChartLegend/LegendItem/LegendItem.type';
@@ -628,6 +629,14 @@ export abstract class AbstractChart<
     );
   }
 
+  protected renderBenchmarkLine() {
+    const { benchmarkValue } = this.asProps;
+
+    return (
+      <BenchmarkLine benchmarkValue={benchmarkValue} level={1} xScale={this.xScale} yScale={this.yScale} />
+    );
+  }
+
   public render() {
     const SChart = Root;
     const { styles, data, patterns, a11yAltTextConfig, duration, eventEmitter, showTooltip } =
@@ -654,6 +663,7 @@ export abstract class AbstractChart<
           {this.renderAxis()}
           {!showTooltip ? null : this.renderTooltip()}
           {this.renderChart()}
+          {this.renderBenchmarkLine()}
         </Plot>
       </SChart>,
     );

semcore/d3-chart/src/component/Chart/AbstractChart.type.ts

@@ -72,6 +72,8 @@ export type BaseChartProps<T extends ListData | ObjectData> = NSFlex.Props & {
    * Chart data. For all charts except Donut(Pie), Radar and Venn should be an Array
    */
   data: T;
+
+  benchmarkValue?: number | Date | string;
   /**
    * Width of plot
    * @default width is 100% of the parent element.

stories/components/d3-chart/docs/examples/area-chart/basic-usage.tsx

@@ -21,6 +21,7 @@ const Demo = () => {
       plotHeight={200}
       tooltipValueFormatter={formatDate}
       aria-label='Area chart'
+      benchmarkValue={2}
     />
   );
 };