mirror of https://github.com/grafana/grafana
MarketTrend: add new alpha panel (#40909)
Leon Sorokin
4 years ago
committed by
GitHub
parent
af61839a26
commit
f0a108afb3
@ -0,0 +1,316 @@ |
|||||||
|
// this file is pretty much a copy-paste of TimeSeriesPanel.tsx :(
|
||||||
|
// with some extra renderers passed to the <TimeSeries> component
|
||||||
|
|
||||||
|
import React, { useMemo } from 'react'; |
||||||
|
import { DataFrame, Field, getDisplayProcessor, PanelProps } from '@grafana/data'; |
||||||
|
import { TooltipDisplayMode } from '@grafana/schema'; |
||||||
|
import { usePanelContext, TimeSeries, TooltipPlugin, ZoomPlugin, UPlotConfigBuilder } from '@grafana/ui'; |
||||||
|
import { getFieldLinksForExplore } from 'app/features/explore/utils/links'; |
||||||
|
import { AnnotationsPlugin } from '../timeseries/plugins/AnnotationsPlugin'; |
||||||
|
import { ContextMenuPlugin } from '../timeseries/plugins/ContextMenuPlugin'; |
||||||
|
import { ExemplarsPlugin } from '../timeseries/plugins/ExemplarsPlugin'; |
||||||
|
import { prepareGraphableFields } from '../timeseries/utils'; |
||||||
|
import { AnnotationEditorPlugin } from '../timeseries/plugins/AnnotationEditorPlugin'; |
||||||
|
import { ThresholdControlsPlugin } from '../timeseries/plugins/ThresholdControlsPlugin'; |
||||||
|
import { config } from 'app/core/config'; |
||||||
|
import { drawMarkers, FieldIndices } from './utils'; |
||||||
|
import { defaultColors, MarketOptions, MarketTrendMode } from './models.gen'; |
||||||
|
import { ScaleProps } from '@grafana/ui/src/components/uPlot/config/UPlotScaleBuilder'; |
||||||
|
import { AxisProps } from '@grafana/ui/src/components/uPlot/config/UPlotAxisBuilder'; |
||||||
|
import { findField } from 'app/features/dimensions'; |
||||||
|
|
||||||
|
interface MarketPanelProps extends PanelProps<MarketOptions> {} |
||||||
|
|
||||||
|
function findFieldInFrames(frames?: DataFrame[], name?: string): Field | undefined { |
||||||
|
if (frames?.length) { |
||||||
|
for (const frame of frames) { |
||||||
|
const f = findField(frame, name); |
||||||
|
if (f) { |
||||||
|
return f; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return undefined; |
||||||
|
} |
||||||
|
|
||||||
|
export const MarketTrendPanel: React.FC<MarketPanelProps> = ({ |
||||||
|
data, |
||||||
|
timeRange, |
||||||
|
timeZone, |
||||||
|
width, |
||||||
|
height, |
||||||
|
options, |
||||||
|
fieldConfig, |
||||||
|
onChangeTimeRange, |
||||||
|
replaceVariables, |
||||||
|
}) => { |
||||||
|
const { sync, canAddAnnotations, onThresholdsChange, canEditThresholds, onSplitOpen } = usePanelContext(); |
||||||
|
|
||||||
|
const getFieldLinks = (field: Field, rowIndex: number) => { |
||||||
|
return getFieldLinksForExplore({ field, rowIndex, splitOpenFn: onSplitOpen, range: timeRange }); |
||||||
|
}; |
||||||
|
|
||||||
|
const { frames, warn } = useMemo( |
||||||
|
() => prepareGraphableFields(data?.series, config.theme2), |
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
[data, options] |
||||||
|
); |
||||||
|
|
||||||
|
const { renderers, tweakScale, tweakAxis } = useMemo(() => { |
||||||
|
let tweakScale = (opts: ScaleProps) => opts; |
||||||
|
let tweakAxis = (opts: AxisProps) => opts; |
||||||
|
|
||||||
|
let doNothing = { |
||||||
|
renderers: [], |
||||||
|
tweakScale, |
||||||
|
tweakAxis, |
||||||
|
}; |
||||||
|
|
||||||
|
if (options.fieldMap == null) { |
||||||
|
return doNothing; |
||||||
|
} |
||||||
|
|
||||||
|
const { mode, priceStyle, fieldMap, colorStrategy } = options; |
||||||
|
const colors = { ...defaultColors, ...options.colors }; |
||||||
|
let { open, high, low, close, volume } = fieldMap; |
||||||
|
|
||||||
|
if ( |
||||||
|
open == null || |
||||||
|
close == null || |
||||||
|
findFieldInFrames(frames, open) == null || |
||||||
|
findFieldInFrames(frames, close) == null |
||||||
|
) { |
||||||
|
return doNothing; |
||||||
|
} |
||||||
|
|
||||||
|
let volumeAlpha = 0.5; |
||||||
|
|
||||||
|
let volumeIdx = -1; |
||||||
|
|
||||||
|
let shouldRenderVolume = false; |
||||||
|
|
||||||
|
// find volume field and set overrides
|
||||||
|
if (volume != null && mode !== MarketTrendMode.Price) { |
||||||
|
let volumeField = findFieldInFrames(frames, volume); |
||||||
|
|
||||||
|
if (volumeField != null) { |
||||||
|
shouldRenderVolume = true; |
||||||
|
|
||||||
|
let { fillOpacity } = volumeField.config.custom; |
||||||
|
|
||||||
|
if (fillOpacity) { |
||||||
|
volumeAlpha = fillOpacity / 100; |
||||||
|
} |
||||||
|
|
||||||
|
// we only want to put volume on own shorter axis when rendered with price
|
||||||
|
if (mode !== MarketTrendMode.Volume) { |
||||||
|
volumeField.config = { ...volumeField.config }; |
||||||
|
volumeField.config.unit = 'short'; |
||||||
|
volumeField.display = getDisplayProcessor({ |
||||||
|
field: volumeField, |
||||||
|
theme: config.theme2, |
||||||
|
}); |
||||||
|
|
||||||
|
tweakAxis = (opts: AxisProps) => { |
||||||
|
if (opts.scaleKey === 'short') { |
||||||
|
let filter = (u: uPlot, splits: number[]) => { |
||||||
|
let _splits = []; |
||||||
|
let max = u.series[volumeIdx].max as number; |
||||||
|
|
||||||
|
for (let i = 0; i < splits.length; i++) { |
||||||
|
_splits.push(splits[i]); |
||||||
|
|
||||||
|
if (splits[i] > max) { |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return _splits; |
||||||
|
}; |
||||||
|
|
||||||
|
opts.space = 20; // reduce tick spacing
|
||||||
|
opts.filter = filter; // hide tick labels
|
||||||
|
opts.ticks = { ...opts.ticks, filter }; // hide tick marks
|
||||||
|
} |
||||||
|
|
||||||
|
return opts; |
||||||
|
}; |
||||||
|
|
||||||
|
tweakScale = (opts: ScaleProps) => { |
||||||
|
if (opts.scaleKey === 'short') { |
||||||
|
opts.range = (u: uPlot, min: number, max: number) => [0, max * 7]; |
||||||
|
} |
||||||
|
|
||||||
|
return opts; |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
let shouldRenderPrice = |
||||||
|
mode !== MarketTrendMode.Volume && |
||||||
|
high != null && |
||||||
|
low != null && |
||||||
|
findFieldInFrames(frames, high) != null && |
||||||
|
findFieldInFrames(frames, low) != null; |
||||||
|
|
||||||
|
if (!shouldRenderPrice && !shouldRenderVolume) { |
||||||
|
return doNothing; |
||||||
|
} |
||||||
|
|
||||||
|
let fields: Record<string, string> = {}; |
||||||
|
let indicesOnly = []; |
||||||
|
|
||||||
|
if (shouldRenderPrice) { |
||||||
|
fields = { open, high, low, close }; |
||||||
|
|
||||||
|
// hide series from legend that are rendered as composite markers
|
||||||
|
for (let key in fields) { |
||||||
|
let field = findFieldInFrames(frames, fields[key])!; |
||||||
|
field.config = { |
||||||
|
...field.config, |
||||||
|
custom: { |
||||||
|
...field.config.custom, |
||||||
|
hideFrom: { legend: true, tooltip: false, viz: false }, |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
} else { |
||||||
|
// these fields should not be omitted from normal rendering if they arent rendered
|
||||||
|
// as part of price markers. they're only here so we can get back their indicies in the
|
||||||
|
// init callback below. TODO: remove this when field mapping happens in the panel instead of deep
|
||||||
|
indicesOnly.push(open, close); |
||||||
|
} |
||||||
|
|
||||||
|
if (shouldRenderVolume) { |
||||||
|
fields.volume = volume; |
||||||
|
fields.open = open; |
||||||
|
fields.close = close; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
renderers: [ |
||||||
|
{ |
||||||
|
fieldMap: fields, |
||||||
|
indicesOnly, |
||||||
|
init: (builder: UPlotConfigBuilder, fieldIndices: FieldIndices) => { |
||||||
|
volumeIdx = fieldIndices.volume!; |
||||||
|
|
||||||
|
builder.addHook( |
||||||
|
'drawAxes', |
||||||
|
drawMarkers({ |
||||||
|
mode, |
||||||
|
fields: fieldIndices, |
||||||
|
upColor: config.theme2.visualization.getColorByName(colors.up), |
||||||
|
downColor: config.theme2.visualization.getColorByName(colors.down), |
||||||
|
flatColor: config.theme2.visualization.getColorByName(colors.flat), |
||||||
|
volumeAlpha, |
||||||
|
colorStrategy, |
||||||
|
priceStyle, |
||||||
|
flatAsUp: true, |
||||||
|
}) |
||||||
|
); |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
tweakScale, |
||||||
|
tweakAxis, |
||||||
|
}; |
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [options, data.structureRev]); |
||||||
|
|
||||||
|
if (!frames || warn) { |
||||||
|
return ( |
||||||
|
<div className="panel-empty"> |
||||||
|
<p>{warn ?? 'No data found in response'}</p> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations()); |
||||||
|
|
||||||
|
return ( |
||||||
|
<TimeSeries |
||||||
|
frames={frames} |
||||||
|
structureRev={data.structureRev} |
||||||
|
timeRange={timeRange} |
||||||
|
timeZone={timeZone} |
||||||
|
width={width} |
||||||
|
height={height} |
||||||
|
legend={options.legend} |
||||||
|
renderers={renderers} |
||||||
|
tweakAxis={tweakAxis} |
||||||
|
tweakScale={tweakScale} |
||||||
|
options={options} |
||||||
|
> |
||||||
|
{(config, alignedDataFrame) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<ZoomPlugin config={config} onZoom={onChangeTimeRange} /> |
||||||
|
<TooltipPlugin |
||||||
|
data={alignedDataFrame} |
||||||
|
config={config} |
||||||
|
mode={TooltipDisplayMode.Multi} |
||||||
|
sync={sync} |
||||||
|
timeZone={timeZone} |
||||||
|
/> |
||||||
|
{/* Renders annotation markers*/} |
||||||
|
{data.annotations && ( |
||||||
|
<AnnotationsPlugin annotations={data.annotations} config={config} timeZone={timeZone} /> |
||||||
|
)} |
||||||
|
{/* Enables annotations creation*/} |
||||||
|
<AnnotationEditorPlugin data={alignedDataFrame} timeZone={timeZone} config={config}> |
||||||
|
{({ startAnnotating }) => { |
||||||
|
return ( |
||||||
|
<ContextMenuPlugin |
||||||
|
data={alignedDataFrame} |
||||||
|
config={config} |
||||||
|
timeZone={timeZone} |
||||||
|
replaceVariables={replaceVariables} |
||||||
|
defaultItems={ |
||||||
|
enableAnnotationCreation |
||||||
|
? [ |
||||||
|
{ |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
label: 'Add annotation', |
||||||
|
ariaLabel: 'Add annotation', |
||||||
|
icon: 'comment-alt', |
||||||
|
onClick: (e, p) => { |
||||||
|
if (!p) { |
||||||
|
return; |
||||||
|
} |
||||||
|
startAnnotating({ coords: p.coords }); |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
] |
||||||
|
: [] |
||||||
|
} |
||||||
|
/> |
||||||
|
); |
||||||
|
}} |
||||||
|
</AnnotationEditorPlugin> |
||||||
|
{data.annotations && ( |
||||||
|
<ExemplarsPlugin |
||||||
|
config={config} |
||||||
|
exemplars={data.annotations} |
||||||
|
timeZone={timeZone} |
||||||
|
getFieldLinks={getFieldLinks} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
{canEditThresholds && onThresholdsChange && ( |
||||||
|
<ThresholdControlsPlugin |
||||||
|
config={config} |
||||||
|
fieldConfig={fieldConfig} |
||||||
|
onThresholdsChange={onThresholdsChange} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
}} |
||||||
|
</TimeSeries> |
||||||
|
); |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,29 @@ |
|||||||
|
// Copyright 2021 Grafana Labs |
||||||
|
// |
||||||
|
// Licensed under the Apache License, Version 2.0 (the "License"); |
||||||
|
// you may not use this file except in compliance with the License. |
||||||
|
// You may obtain a copy of the License at |
||||||
|
// |
||||||
|
// http://www.apache.org/licenses/LICENSE-2.0 |
||||||
|
// |
||||||
|
// Unless required by applicable law or agreed to in writing, software |
||||||
|
// distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
// See the License for the specific language governing permissions and |
||||||
|
// limitations under the License. |
||||||
|
|
||||||
|
package grafanaschema |
||||||
|
|
||||||
|
Panel: { |
||||||
|
lineages: [ |
||||||
|
[ |
||||||
|
{ |
||||||
|
PanelOptions: { |
||||||
|
// anything for now |
||||||
|
... |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
] |
||||||
|
migrations: [] |
||||||
|
} |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
|
// NOTE: This file will be auto generated from models.cue
|
||||||
|
// It is currenty hand written but will serve as the target for cuetsy
|
||||||
|
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
|
|
||||||
|
import { TimeSeriesOptions } from '../timeseries/types'; |
||||||
|
|
||||||
|
export const modelVersion = Object.freeze([1, 0]); |
||||||
|
|
||||||
|
export enum MarketTrendMode { |
||||||
|
Price = 'price', |
||||||
|
Volume = 'volume', |
||||||
|
PriceVolume = 'pricevolume', |
||||||
|
} |
||||||
|
|
||||||
|
export enum PriceStyle { |
||||||
|
Candles = 'candles', |
||||||
|
OHLCBars = 'ohlcbars', |
||||||
|
} |
||||||
|
|
||||||
|
export enum ColorStrategy { |
||||||
|
// up/down color depends on current close vs current open
|
||||||
|
// filled always
|
||||||
|
Intra = 'intra', |
||||||
|
// up/down color depends on current close vs prior close
|
||||||
|
// filled/hollow depends on current close vs current open
|
||||||
|
Inter = 'inter', |
||||||
|
} |
||||||
|
|
||||||
|
interface SemanticFieldMap { |
||||||
|
[semanticName: string]: string; |
||||||
|
} |
||||||
|
|
||||||
|
export interface MarketTrendColors { |
||||||
|
up: string; |
||||||
|
down: string; |
||||||
|
flat: string; |
||||||
|
} |
||||||
|
|
||||||
|
export const defaultColors: MarketTrendColors = { |
||||||
|
up: 'green', |
||||||
|
down: 'red', |
||||||
|
flat: 'gray', |
||||||
|
}; |
||||||
|
|
||||||
|
export interface MarketOptions extends TimeSeriesOptions { |
||||||
|
mode: MarketTrendMode; |
||||||
|
priceStyle: PriceStyle; |
||||||
|
colorStrategy: ColorStrategy; |
||||||
|
fieldMap: SemanticFieldMap; |
||||||
|
colors: MarketTrendColors; |
||||||
|
} |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
import { GraphFieldConfig } from '@grafana/schema'; |
||||||
|
import { FieldConfigProperty, PanelPlugin, SelectableValue } from '@grafana/data'; |
||||||
|
import { commonOptionsBuilder } from '@grafana/ui'; |
||||||
|
import { MarketTrendPanel } from './MarketTrendPanel'; |
||||||
|
import { defaultColors, MarketOptions, MarketTrendMode, ColorStrategy, PriceStyle } from './models.gen'; |
||||||
|
import { defaultGraphConfig, getGraphFieldConfig } from '../timeseries/config'; |
||||||
|
|
||||||
|
const modeOptions = [ |
||||||
|
{ label: 'Price & Volume', value: MarketTrendMode.PriceVolume }, |
||||||
|
{ label: 'Price', value: MarketTrendMode.Price }, |
||||||
|
{ label: 'Volume', value: MarketTrendMode.Volume }, |
||||||
|
] as Array<SelectableValue<MarketTrendMode>>; |
||||||
|
|
||||||
|
const priceStyle = [ |
||||||
|
{ label: 'Candles', value: PriceStyle.Candles }, |
||||||
|
{ label: 'OHLC Bars', value: PriceStyle.OHLCBars }, |
||||||
|
] as Array<SelectableValue<PriceStyle>>; |
||||||
|
|
||||||
|
const colorStrategy = [ |
||||||
|
{ label: 'Since Open', value: 'intra' }, |
||||||
|
{ label: 'Since Prior Close', value: 'inter' }, |
||||||
|
] as Array<SelectableValue<ColorStrategy>>; |
||||||
|
|
||||||
|
function getMarketFieldConfig() { |
||||||
|
const v = getGraphFieldConfig(defaultGraphConfig); |
||||||
|
v.standardOptions![FieldConfigProperty.Unit] = { |
||||||
|
settings: {}, |
||||||
|
defaultValue: 'currencyUSD', |
||||||
|
}; |
||||||
|
return v; |
||||||
|
} |
||||||
|
|
||||||
|
export const plugin = new PanelPlugin<MarketOptions, GraphFieldConfig>(MarketTrendPanel) |
||||||
|
.useFieldConfig(getMarketFieldConfig()) |
||||||
|
.setPanelOptions((builder) => { |
||||||
|
builder |
||||||
|
.addRadio({ |
||||||
|
path: 'mode', |
||||||
|
name: 'Mode', |
||||||
|
description: '', |
||||||
|
defaultValue: MarketTrendMode.PriceVolume, |
||||||
|
settings: { |
||||||
|
options: modeOptions, |
||||||
|
}, |
||||||
|
}) |
||||||
|
.addRadio({ |
||||||
|
path: 'priceStyle', |
||||||
|
name: 'Price style', |
||||||
|
description: '', |
||||||
|
defaultValue: PriceStyle.Candles, |
||||||
|
settings: { |
||||||
|
options: priceStyle, |
||||||
|
}, |
||||||
|
showIf: (opts) => opts.mode !== MarketTrendMode.Volume, |
||||||
|
}) |
||||||
|
.addRadio({ |
||||||
|
path: 'colorStrategy', |
||||||
|
name: 'Color strategy', |
||||||
|
description: '', |
||||||
|
defaultValue: ColorStrategy.Intra, |
||||||
|
settings: { |
||||||
|
options: colorStrategy, |
||||||
|
}, |
||||||
|
}) |
||||||
|
.addColorPicker({ |
||||||
|
path: 'colors.up', |
||||||
|
name: 'Up color', |
||||||
|
defaultValue: defaultColors.up, |
||||||
|
}) |
||||||
|
.addColorPicker({ |
||||||
|
path: 'colors.down', |
||||||
|
name: 'Down color', |
||||||
|
defaultValue: defaultColors.down, |
||||||
|
}) |
||||||
|
.addFieldNamePicker({ |
||||||
|
path: 'fieldMap.open', |
||||||
|
name: 'Open field', |
||||||
|
}) |
||||||
|
.addFieldNamePicker({ |
||||||
|
path: 'fieldMap.high', |
||||||
|
name: 'High field', |
||||||
|
showIf: (opts) => opts.mode !== MarketTrendMode.Volume, |
||||||
|
}) |
||||||
|
.addFieldNamePicker({ |
||||||
|
path: 'fieldMap.low', |
||||||
|
name: 'Low field', |
||||||
|
showIf: (opts) => opts.mode !== MarketTrendMode.Volume, |
||||||
|
}) |
||||||
|
.addFieldNamePicker({ |
||||||
|
path: 'fieldMap.close', |
||||||
|
name: 'Close field', |
||||||
|
}) |
||||||
|
.addFieldNamePicker({ |
||||||
|
path: 'fieldMap.volume', |
||||||
|
name: 'Volume field', |
||||||
|
showIf: (opts) => opts.mode !== MarketTrendMode.Price, |
||||||
|
}); |
||||||
|
|
||||||
|
// commonOptionsBuilder.addTooltipOptions(builder);
|
||||||
|
commonOptionsBuilder.addLegendOptions(builder); |
||||||
|
}) |
||||||
|
.setDataSupport({ annotations: true, alertStates: true }); |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
{ |
||||||
|
"type": "panel", |
||||||
|
"name": "Market trend", |
||||||
|
"id": "market-trend", |
||||||
|
"state": "alpha", |
||||||
|
|
||||||
|
"info": { |
||||||
|
"author": { |
||||||
|
"name": "Grafana Labs", |
||||||
|
"url": "https://grafana.com" |
||||||
|
}, |
||||||
|
"logos": { |
||||||
|
"small": "img/candlestick.svg", |
||||||
|
"large": "img/candlestick.svg" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,181 @@ |
|||||||
|
import { MarketTrendMode, ColorStrategy, PriceStyle } from './models.gen'; |
||||||
|
import uPlot from 'uplot'; |
||||||
|
import { colorManipulator } from '@grafana/data'; |
||||||
|
|
||||||
|
const { alpha } = colorManipulator; |
||||||
|
|
||||||
|
export type FieldIndices = Record<string, number>; |
||||||
|
|
||||||
|
interface RendererOpts { |
||||||
|
mode: MarketTrendMode; |
||||||
|
priceStyle: PriceStyle; |
||||||
|
fields: FieldIndices; |
||||||
|
colorStrategy: ColorStrategy; |
||||||
|
upColor: string; |
||||||
|
downColor: string; |
||||||
|
flatColor: string; |
||||||
|
volumeAlpha: number; |
||||||
|
flatAsUp: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
export function drawMarkers(opts: RendererOpts) { |
||||||
|
let { mode, priceStyle, fields, colorStrategy, upColor, downColor, flatColor, volumeAlpha, flatAsUp = true } = opts; |
||||||
|
|
||||||
|
let drawPrice = mode !== MarketTrendMode.Volume && fields.high != null && fields.low != null; |
||||||
|
let asCandles = drawPrice && priceStyle === PriceStyle.Candles; |
||||||
|
let drawVolume = mode !== MarketTrendMode.Price && fields.volume != null; |
||||||
|
|
||||||
|
function selectPath(priceDir: number, flatPath: Path2D, upPath: Path2D, downPath: Path2D, flatAsUp: boolean) { |
||||||
|
return priceDir > 0 ? upPath : priceDir < 0 ? downPath : flatAsUp ? upPath : flatPath; |
||||||
|
} |
||||||
|
|
||||||
|
let tIdx = 0, |
||||||
|
oIdx = fields.open, |
||||||
|
hIdx = fields.high, |
||||||
|
lIdx = fields.low, |
||||||
|
cIdx = fields.close, |
||||||
|
vIdx = fields.volume; |
||||||
|
|
||||||
|
return (u: uPlot) => { |
||||||
|
// split by discrete color to reduce draw calls
|
||||||
|
let downPath, upPath, flatPath; |
||||||
|
// with adjusted reduced
|
||||||
|
let downPathVol, upPathVol, flatPathVol; |
||||||
|
|
||||||
|
if (drawPrice) { |
||||||
|
flatPath = new Path2D(); |
||||||
|
upPath = new Path2D(); |
||||||
|
downPath = new Path2D(); |
||||||
|
} |
||||||
|
|
||||||
|
if (drawVolume) { |
||||||
|
downPathVol = new Path2D(); |
||||||
|
upPathVol = new Path2D(); |
||||||
|
flatPathVol = new Path2D(); |
||||||
|
} |
||||||
|
|
||||||
|
let hollowPath = new Path2D(); |
||||||
|
|
||||||
|
let ctx = u.ctx; |
||||||
|
|
||||||
|
let tData = u.data[tIdx!]; |
||||||
|
|
||||||
|
let oData = u.data[oIdx!]; |
||||||
|
let cData = u.data[cIdx!]; |
||||||
|
|
||||||
|
let hData = drawPrice ? u.data[hIdx!] : null; |
||||||
|
let lData = drawPrice ? u.data[lIdx!] : null; |
||||||
|
let vData = drawVolume ? u.data[vIdx!] : null; |
||||||
|
|
||||||
|
let zeroPx = vIdx != null ? Math.round(u.valToPos(0, u.series[vIdx!].scale!, true)) : null; |
||||||
|
|
||||||
|
let [idx0, idx1] = u.series[0].idxs!; |
||||||
|
|
||||||
|
let colWidth = u.bbox.width / (idx1 - idx0); |
||||||
|
let barWidth = Math.round(0.6 * colWidth); |
||||||
|
|
||||||
|
let stickWidth = 2; |
||||||
|
let outlineWidth = 2; |
||||||
|
|
||||||
|
if (barWidth <= 12) { |
||||||
|
stickWidth = outlineWidth = 1; |
||||||
|
} |
||||||
|
|
||||||
|
let halfWidth = Math.floor(barWidth / 2); |
||||||
|
|
||||||
|
for (let i = idx0; i <= idx1; i++) { |
||||||
|
let tPx = Math.round(u.valToPos(tData[i]!, 'x', true)); |
||||||
|
|
||||||
|
// current close vs prior close
|
||||||
|
let interDir = i === idx0 ? 0 : Math.sign(cData[i]! - cData[i - 1]!); |
||||||
|
// current close vs current open
|
||||||
|
let intraDir = Math.sign(cData[i]! - oData[i]!); |
||||||
|
|
||||||
|
// volume
|
||||||
|
if (drawVolume) { |
||||||
|
let outerPath = selectPath( |
||||||
|
colorStrategy === ColorStrategy.Inter ? interDir : intraDir, |
||||||
|
flatPathVol as Path2D, |
||||||
|
upPathVol as Path2D, |
||||||
|
downPathVol as Path2D, |
||||||
|
i === idx0 && ColorStrategy.Inter ? false : flatAsUp |
||||||
|
); |
||||||
|
|
||||||
|
let vPx = Math.round(u.valToPos(vData![i]!, u.series[vIdx!].scale!, true)); |
||||||
|
outerPath.rect(tPx - halfWidth, vPx, barWidth, zeroPx! - vPx); |
||||||
|
} |
||||||
|
|
||||||
|
if (drawPrice) { |
||||||
|
let outerPath = selectPath( |
||||||
|
colorStrategy === ColorStrategy.Inter ? interDir : intraDir, |
||||||
|
flatPath as Path2D, |
||||||
|
upPath as Path2D, |
||||||
|
downPath as Path2D, |
||||||
|
i === idx0 && ColorStrategy.Inter ? false : flatAsUp |
||||||
|
); |
||||||
|
|
||||||
|
// stick
|
||||||
|
let hPx = Math.round(u.valToPos(hData![i]!, u.series[hIdx!].scale!, true)); |
||||||
|
let lPx = Math.round(u.valToPos(lData![i]!, u.series[lIdx!].scale!, true)); |
||||||
|
outerPath.rect(tPx - Math.floor(stickWidth / 2), hPx, stickWidth, lPx - hPx); |
||||||
|
|
||||||
|
let oPx = Math.round(u.valToPos(oData[i]!, u.series[oIdx!].scale!, true)); |
||||||
|
let cPx = Math.round(u.valToPos(cData[i]!, u.series[cIdx!].scale!, true)); |
||||||
|
|
||||||
|
if (asCandles) { |
||||||
|
// rect
|
||||||
|
let top = Math.min(oPx, cPx); |
||||||
|
let btm = Math.max(oPx, cPx); |
||||||
|
let hgt = Math.max(1, btm - top); |
||||||
|
outerPath.rect(tPx - halfWidth, top, barWidth, hgt); |
||||||
|
|
||||||
|
if (colorStrategy === ColorStrategy.Inter) { |
||||||
|
if (intraDir >= 0 && hgt > outlineWidth * 2) { |
||||||
|
hollowPath.rect( |
||||||
|
tPx - halfWidth + outlineWidth, |
||||||
|
top + outlineWidth, |
||||||
|
barWidth - outlineWidth * 2, |
||||||
|
hgt - outlineWidth * 2 |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
outerPath.rect(tPx - halfWidth, oPx, halfWidth, stickWidth); |
||||||
|
outerPath.rect(tPx, cPx, halfWidth, stickWidth); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ctx.save(); |
||||||
|
|
||||||
|
ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height); |
||||||
|
ctx.clip(); |
||||||
|
|
||||||
|
if (drawVolume) { |
||||||
|
ctx.fillStyle = alpha(upColor, volumeAlpha); |
||||||
|
ctx.fill(upPathVol as Path2D); |
||||||
|
|
||||||
|
ctx.fillStyle = alpha(downColor, volumeAlpha); |
||||||
|
ctx.fill(downPathVol as Path2D); |
||||||
|
|
||||||
|
ctx.fillStyle = alpha(flatColor, volumeAlpha); |
||||||
|
ctx.fill(flatPathVol as Path2D); |
||||||
|
} |
||||||
|
|
||||||
|
if (drawPrice) { |
||||||
|
ctx.fillStyle = upColor; |
||||||
|
ctx.fill(upPath as Path2D); |
||||||
|
|
||||||
|
ctx.fillStyle = downColor; |
||||||
|
ctx.fill(downPath as Path2D); |
||||||
|
|
||||||
|
ctx.fillStyle = flatColor; |
||||||
|
ctx.fill(flatPath as Path2D); |
||||||
|
|
||||||
|
ctx.globalCompositeOperation = 'destination-out'; |
||||||
|
ctx.fill(hollowPath); |
||||||
|
} |
||||||
|
|
||||||
|
ctx.restore(); |
||||||
|
}; |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue