Добавлена настройка штриховки

This commit is contained in:
Александр Сироткин 2022-07-30 22:45:08 +05:00
parent 367b63ae50
commit 1b6768be90
3 changed files with 11 additions and 1 deletions

View File

@ -79,6 +79,8 @@ export type D3ChartProps<DataType> = React.DetailedHTMLProps<React.HTMLAttribute
backgroundColor?: Property.Color backgroundColor?: Property.Color
/** Настройки рисок и цен деления графика */ /** Настройки рисок и цен деления графика */
ticks?: ChartTicks<DataType> ticks?: ChartTicks<DataType>
/** Штриховка графика */
dash?: string | number | number[]
/** Параметры плагинов */ /** Параметры плагинов */
plugins?: { plugins?: {
/** Параметры контекстного меню */ /** Параметры контекстного меню */
@ -111,6 +113,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
backgroundColor = 'transparent', backgroundColor = 'transparent',
ticks, ticks,
plugins, plugins,
dash,
...other ...other
}: D3ChartProps<DataType>) => { }: D3ChartProps<DataType>) => {
const xAxisConfig = usePartialProps<ChartAxis<DataType>>(_xAxisConfig, getDefaultXAxisConfig) const xAxisConfig = usePartialProps<ChartAxis<DataType>>(_xAxisConfig, getDefaultXAxisConfig)
@ -334,6 +337,8 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
if (chart.point) if (chart.point)
renderPoint<DataType>(xAxis, yAxis, chart, chartData, true) renderPoint<DataType>(xAxis, yAxis, chart, chartData, true)
if (dash) chart().attr('stroke-dasharray', dash)
chart.afterDraw?.(chart) chart.afterDraw?.(chart)
}) })
}, [charts, data, xAxis, yAxis, height, offset]) }, [charts, data, xAxis, yAxis, height, offset])

View File

@ -111,6 +111,8 @@ export type D3MonitoringChartsProps<DataType extends Record<string, any>> = Reac
} }
/** Настройки рисок и цен деления вертикальной шкалы */ /** Настройки рисок и цен деления вертикальной шкалы */
yTicks?: ChartTick<DataType> yTicks?: ChartTick<DataType>
/** Штриховка графика */
dash?: string | number | number[]
/** Диапозон отображаемых значений по вертикальной оси (сверху вниз) */ /** Диапозон отображаемых значений по вертикальной оси (сверху вниз) */
yDomain?: MinMax yDomain?: MinMax
/** Событие, вызываемое при прокрутке колёсика мышки над графиком */ /** Событие, вызываемое при прокрутке колёсика мышки над графиком */
@ -162,6 +164,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
yTicks: _yTicks, yTicks: _yTicks,
axisHeight = 20, axisHeight = 20,
spaceBetweenGroups = 30, spaceBetweenGroups = 30,
dash,
className = '', className = '',
...other ...other
@ -455,6 +458,8 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
if (chart.point) if (chart.point)
renderPoint<DataType>(xAxis, yAxis, chart, chartData, true) renderPoint<DataType>(xAxis, yAxis, chart, chartData, true)
if (dash) chart().attr('stroke-dasharray', dash)
chart.afterDraw?.(chart) chart.afterDraw?.(chart)
}) })
}) })

View File

@ -70,7 +70,7 @@ const chartDatasets = [{
yAxis: { yAxis: {
type: 'linear', type: 'linear',
accessor: (row) => row.operationValue?.targetValue ?? null, accessor: (row) => row.operationValue?.targetValue ?? null,
} },
}] }]
const xAxis = { const xAxis = {