2023-08-02 14:29:41 +00:00
|
|
|
import 'pennant/dist/style.css';
|
|
|
|
import {
|
|
|
|
ChartType,
|
|
|
|
Interval,
|
|
|
|
Overlay,
|
|
|
|
Study,
|
|
|
|
chartTypeLabels,
|
|
|
|
intervalLabels,
|
|
|
|
overlayLabels,
|
|
|
|
studyLabels,
|
|
|
|
} from 'pennant';
|
|
|
|
import {
|
2023-09-02 00:00:11 +00:00
|
|
|
TradingButton,
|
|
|
|
TradingDropdown,
|
|
|
|
TradingDropdownCheckboxItem,
|
|
|
|
TradingDropdownContent,
|
|
|
|
TradingDropdownItemIndicator,
|
|
|
|
TradingDropdownRadioGroup,
|
|
|
|
TradingDropdownRadioItem,
|
|
|
|
TradingDropdownTrigger,
|
2023-08-02 14:29:41 +00:00
|
|
|
Icon,
|
|
|
|
} from '@vegaprotocol/ui-toolkit';
|
|
|
|
import type { IconName } from '@blueprintjs/icons';
|
|
|
|
import { IconNames } from '@blueprintjs/icons';
|
|
|
|
import { t } from '@vegaprotocol/i18n';
|
|
|
|
import { useCandlesChartSettings } from './use-candles-chart-settings';
|
|
|
|
|
|
|
|
const chartTypeIcon = new Map<ChartType, IconName>([
|
|
|
|
[ChartType.AREA, IconNames.TIMELINE_AREA_CHART],
|
|
|
|
[ChartType.CANDLE, IconNames.WATERFALL_CHART],
|
|
|
|
[ChartType.LINE, IconNames.TIMELINE_LINE_CHART],
|
|
|
|
[ChartType.OHLC, IconNames.WATERFALL_CHART],
|
|
|
|
]);
|
|
|
|
|
|
|
|
export const CandlesMenu = () => {
|
|
|
|
const {
|
|
|
|
interval,
|
|
|
|
chartType,
|
|
|
|
studies,
|
|
|
|
overlays,
|
|
|
|
setInterval,
|
|
|
|
setType,
|
|
|
|
setStudies,
|
|
|
|
setOverlays,
|
|
|
|
} = useCandlesChartSettings();
|
|
|
|
const triggerClasses = 'text-xs';
|
|
|
|
const contentAlign = 'end';
|
2023-09-02 00:00:11 +00:00
|
|
|
const triggerButtonProps = { size: 'extra-small' } as const;
|
2023-08-02 14:29:41 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdown
|
2023-08-02 14:29:41 +00:00
|
|
|
trigger={
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownTrigger className={triggerClasses}>
|
|
|
|
<TradingButton {...triggerButtonProps}>
|
|
|
|
{t(`Interval: ${intervalLabels[interval]}`)}
|
|
|
|
</TradingButton>
|
|
|
|
</TradingDropdownTrigger>
|
2023-08-02 14:29:41 +00:00
|
|
|
}
|
|
|
|
>
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownContent align={contentAlign}>
|
|
|
|
<TradingDropdownRadioGroup
|
2023-08-02 14:29:41 +00:00
|
|
|
value={interval}
|
|
|
|
onValueChange={(value) => {
|
|
|
|
setInterval(value as Interval);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{Object.values(Interval).map((timeInterval) => (
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownRadioItem
|
2023-08-02 14:29:41 +00:00
|
|
|
key={timeInterval}
|
|
|
|
inset
|
|
|
|
value={timeInterval}
|
|
|
|
>
|
|
|
|
{intervalLabels[timeInterval]}
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownItemIndicator />
|
|
|
|
</TradingDropdownRadioItem>
|
2023-08-02 14:29:41 +00:00
|
|
|
))}
|
2023-09-02 00:00:11 +00:00
|
|
|
</TradingDropdownRadioGroup>
|
|
|
|
</TradingDropdownContent>
|
|
|
|
</TradingDropdown>
|
|
|
|
<TradingDropdown
|
2023-08-02 14:29:41 +00:00
|
|
|
trigger={
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownTrigger className={triggerClasses}>
|
|
|
|
<TradingButton {...triggerButtonProps}>
|
|
|
|
<Icon name={chartTypeIcon.get(chartType) as IconName} />
|
|
|
|
</TradingButton>
|
|
|
|
</TradingDropdownTrigger>
|
2023-08-02 14:29:41 +00:00
|
|
|
}
|
|
|
|
>
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownContent align={contentAlign}>
|
|
|
|
<TradingDropdownRadioGroup
|
2023-08-02 14:29:41 +00:00
|
|
|
value={chartType}
|
|
|
|
onValueChange={(value) => {
|
|
|
|
setType(value as ChartType);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{Object.values(ChartType).map((type) => (
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownRadioItem key={type} inset value={type}>
|
2023-08-02 14:29:41 +00:00
|
|
|
{chartTypeLabels[type]}
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownItemIndicator />
|
|
|
|
</TradingDropdownRadioItem>
|
2023-08-02 14:29:41 +00:00
|
|
|
))}
|
2023-09-02 00:00:11 +00:00
|
|
|
</TradingDropdownRadioGroup>
|
|
|
|
</TradingDropdownContent>
|
|
|
|
</TradingDropdown>
|
|
|
|
<TradingDropdown
|
2023-08-02 14:29:41 +00:00
|
|
|
trigger={
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownTrigger className={triggerClasses}>
|
|
|
|
<TradingButton {...triggerButtonProps}>
|
2023-10-27 13:21:14 +00:00
|
|
|
{t('Indicators')}
|
2023-09-02 00:00:11 +00:00
|
|
|
</TradingButton>
|
|
|
|
</TradingDropdownTrigger>
|
2023-08-02 14:29:41 +00:00
|
|
|
}
|
|
|
|
>
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownContent align={contentAlign}>
|
2023-08-02 14:29:41 +00:00
|
|
|
{Object.values(Overlay).map((overlay) => (
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownCheckboxItem
|
2023-08-02 14:29:41 +00:00
|
|
|
key={overlay}
|
|
|
|
checked={overlays.includes(overlay)}
|
|
|
|
onCheckedChange={() => {
|
|
|
|
const newOverlays = [...overlays];
|
|
|
|
const index = overlays.findIndex((item) => item === overlay);
|
|
|
|
|
|
|
|
index !== -1
|
|
|
|
? newOverlays.splice(index, 1)
|
|
|
|
: newOverlays.push(overlay);
|
|
|
|
|
|
|
|
setOverlays(newOverlays);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{overlayLabels[overlay]}
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownItemIndicator />
|
|
|
|
</TradingDropdownCheckboxItem>
|
2023-08-02 14:29:41 +00:00
|
|
|
))}
|
|
|
|
{Object.values(Study).map((study) => (
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownCheckboxItem
|
2023-08-02 14:29:41 +00:00
|
|
|
key={study}
|
|
|
|
checked={studies.includes(study)}
|
|
|
|
onCheckedChange={() => {
|
|
|
|
const newStudies = [...studies];
|
|
|
|
const index = studies.findIndex((item) => item === study);
|
|
|
|
|
|
|
|
index !== -1
|
|
|
|
? newStudies.splice(index, 1)
|
|
|
|
: newStudies.push(study);
|
|
|
|
|
|
|
|
setStudies(newStudies);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{studyLabels[study]}
|
2023-09-02 00:00:11 +00:00
|
|
|
<TradingDropdownItemIndicator />
|
|
|
|
</TradingDropdownCheckboxItem>
|
2023-08-02 14:29:41 +00:00
|
|
|
))}
|
2023-09-02 00:00:11 +00:00
|
|
|
</TradingDropdownContent>
|
|
|
|
</TradingDropdown>
|
2023-08-02 14:29:41 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|