From d957ac66902a8259fbc7ab12971680bb15e2c65b Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Mon, 11 Jul 2022 12:47:43 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D1=84=D0=B0=D0=B9=D0=BB=20=D1=81=20=D0=BC=D0=B5=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=B0=D0=BC=D0=B8=20=D0=B4=D0=BB=D1=8F=20D3=20?=
 =?UTF-8?q?=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/d3/functions.ts | 19 +++++++++++++++++
 src/components/d3/types.ts     | 37 +++++++++++++++++++++++++---------
 2 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 src/components/d3/functions.ts

diff --git a/src/components/d3/functions.ts b/src/components/d3/functions.ts
new file mode 100644
index 0000000..3df51bd
--- /dev/null
+++ b/src/components/d3/functions.ts
@@ -0,0 +1,19 @@
+import { range } from 'd3'
+
+import { MinMax } from './types'
+
+export const getChartClass = (key: string | number) => `chart-id-${key}`
+export const getGroupClass = (key: string | number) => `group-id-${key}`
+
+export const getByAccessor = <DataType extends Record<any, any>, R>(accessor: keyof DataType | ((d: DataType) => R)): ((d: DataType) => R) => {
+    if (typeof accessor === 'function')
+        return accessor
+    return (d) => d[accessor]
+}
+
+export const getTicks = (domain: MinMax, count: number) => {
+    const min = domain.min ?? 0
+    const max = domain.max ?? 0
+    const step = (max - min) / count
+    return [...range(min, max, step), max]
+}
diff --git a/src/components/d3/types.ts b/src/components/d3/types.ts
index 084d3a4..65cbd0b 100644
--- a/src/components/d3/types.ts
+++ b/src/components/d3/types.ts
@@ -5,9 +5,11 @@ import {
     D3TooltipSettings
 } from './plugins'
 
+export type AxisAccessor<DataType extends Record<string, any>> = keyof DataType | ((d: DataType) => any)
+
 export type ChartAxis<DataType> = {
     type: 'linear' | 'time',
-    accessor: keyof DataType | ((d: DataType) => any)
+    accessor: AxisAccessor<DataType>
     unit?: ReactNode
     format?: (v: d3.NumberValue) => ReactNode
 }
@@ -47,6 +49,15 @@ export type AreaChartDataset = {
     optimization?: boolean
 }
 
+export type RectArea<DataType extends Record<string, number>> = {
+    type: 'rect_area'
+    minXAccessor?: AxisAccessor<DataType>
+    maxXAccessor?: AxisAccessor<DataType>
+    minYAccessor?: AxisAccessor<DataType>
+    maxYAccessor?: AxisAccessor<DataType>
+    data?: DataType[]
+}
+
 export type LineChartDataset = {
     type: 'line'
     nullValues?: 'skip' | 'gap' | 'none'
@@ -61,12 +72,15 @@ export type ChartDataset<DataType> = BaseChartDataset<DataType> & (
     AreaChartDataset |
     LineChartDataset |
     NeedleChartDataset |
-    PointChartDataset
+    PointChartDataset |
+    RectArea<Record<string, any>>
 )
 
+export type MinMax = { min?: number, max?: number }
+
 export type ChartDomain = {
-    x: { min?: number, max?: number }
-    y: { min?: number, max?: number }
+    x?: MinMax
+    y?: MinMax
 }
 
 export type ChartOffset = {
@@ -76,14 +90,17 @@ export type ChartOffset = {
     right: number
 }
 
+export type ChartTick<DataType> = {
+    visible?: boolean,
+    count?: number | d3.TimeInterval,
+    format?: (d: d3.NumberValue, idx: number, data?: DataType) => string,
+    color?: Property.Color
+}
+
 export type ChartTicks<DataType> = {
     color?: Property.Color
-    x?: {
-        visible?: boolean,
-        count?: number,
-        format?: (d: d3.NumberValue) => string,
-    }
-    y?: { visible?: boolean, count?: number }
+    x?: ChartTick<DataType>
+    y?: ChartTick<DataType>
 }
 
 export type ChartRegistry<DataType> = ChartDataset<DataType> & {