chore: add issue story

src/plugins/yagr/__stories__/Yagr.stories.tsx

@@ -10,7 +10,7 @@ import {ChartKit} from '../../../components/ChartKit';
 import {settings} from '../../../libs';
 import type {ChartKitRef} from '../../../types';
 
-import {getNewConfig, line10} from './mocks/line10';
+import {getNewConfig, line10, line10WithGrafanaStyle} from './mocks/line10';
 
 import '@gravity-ui/yagr/dist/index.css';
 
@@ -132,6 +132,23 @@ const CustomTooltipImpl: Story<any> = () => {
     );
 };
 
+const AreaTemplate: Story<any> = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef<ChartKitRef>();
+
+    if (!shown) {
+        settings.set({plugins: [YagrPlugin]});
+        return <Button onClick={() => setShown(true)}>Show chart</Button>;
+    }
+
+    return (
+        <div style={{height: 300, width: '100%'}}>
+            <ChartKit ref={chartkitRef} id="1" type="yagr" data={line10WithGrafanaStyle} />
+        </div>
+    );
+};
+
 export const Line = LineTemplate.bind({});
 export const Updates = UpdatesTemplate.bind({});
 export const CustomTooltip = CustomTooltipImpl.bind({});
+export const Area = AreaTemplate.bind({});

src/plugins/yagr/__stories__/mocks/line10.ts

@@ -1,4 +1,4 @@
-import type {YagrWidgetData} from '../../types';
+import type {AreaSeriesOptions, RawSerieData, YagrWidgetData} from '../../types';
 
 export const line10: YagrWidgetData = {
     data: {
@@ -89,3 +89,104 @@ export const getNewConfig = () => {
         },
     };
 };
+
+// Grafana classic colors palette
+const colors = [
+    '#7EB26D', // 0: pale green
+    '#EAB839', // 1: mustard
+    '#6ED0E0', // 2: light blue
+    '#EF843C', // 3: orange
+    '#E24D42', // 4: red
+    '#1F78C1', // 5: ocean
+    '#BA43A9', // 6: purple
+    '#705DA0', // 7: violet
+    '#508642', // 8: dark green
+    '#CCA300', // 9: dark sand
+];
+
+function colorHexToRGBA(htmlColor: string, opacity: number) {
+    const COLOR_REGEX = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/;
+    const arrRGB = htmlColor.match(COLOR_REGEX);
+    if (arrRGB === null) {
+        throw new Error(
+            'Invalid color passed, the color should be in the html format. Example: #ff0033',
+        );
+    }
+    const red = parseInt(arrRGB[1], 16);
+    const green = parseInt(arrRGB[2], 16);
+    const blue = parseInt(arrRGB[3], 16);
+    return `rgba(${[red, green, blue, opacity].join(',')})`;
+}
+
+const graphs: RawSerieData<AreaSeriesOptions>[] = [
+    {
+        id: '0',
+        name: 'Serie 1',
+        type: 'area',
+        color: colorHexToRGBA(colors[0], 0.1),
+        lineColor: colors[0],
+        data: [45, 52, 89, 72, 39, 49, 82, 59, 36, 5],
+    },
+    {
+        id: '1',
+        name: 'Serie 2',
+        type: 'area',
+        color: colorHexToRGBA(colors[1], 0.1),
+        lineColor: colors[1],
+        data: [37, 6, 51, 10, 65, 35, 72, 0, 94, 54],
+    },
+    {
+        id: '2',
+        name: 'Serie 3',
+        type: 'area',
+        color: colorHexToRGBA(colors[2], 0.1),
+        lineColor: colors[2],
+        data: [26, 54, 15, 40, 43, 18, 65, 46, 51, 33],
+    },
+];
+
+export const line10WithGrafanaStyle: YagrWidgetData = {
+    data: {
+        timeline: [
+            1636838612441, 1636925012441, 1637011412441, 1637097812441, 1637184212441,
+            1637270612441, 1637357012441, 1637443412441, 1637529812441, 1637616212441,
+        ],
+        graphs,
+    },
+    libraryConfig: {
+        chart: {
+            series: {
+                type: 'area',
+                lineWidth: 1.5,
+            },
+            select: {
+                zoom: false,
+            },
+        },
+        title: {
+            text: 'line: random 10 pts',
+        },
+        axes: {
+            x: {},
+        },
+        scales: {
+            x: {},
+            y: {
+                type: 'linear',
+                range: 'nice',
+            },
+        },
+        cursor: {
+            x: {
+                visible: true,
+                style: 'solid 2px rgba(230, 2, 7, 0.3)',
+            },
+        },
+        tooltip: {
+            show: true,
+            tracking: 'sticky',
+        },
+        legend: {},
+        processing: {},
+    },
+};