diff --git a/src/lib/ctx/metrics-registry/types/index.ts b/src/lib/ctx/metrics-registry/types/index.ts index d036d46eb..d0599ee79 100644 --- a/src/lib/ctx/metrics-registry/types/index.ts +++ b/src/lib/ctx/metrics-registry/types/index.ts @@ -93,6 +93,8 @@ export type TChartMetricBase = { color: string style: NonNullable lineStyle: LineStyle + lastValueVisible: boolean + priceLineVisible: boolean unit: TChartMetric['unit'] isSelectorLocked: boolean @@ -116,6 +118,8 @@ type TBaseSeries = { color: string style: TMetricStyles lineStyle: LineStyle + lastValueVisible?: boolean + priceLineVisible?: boolean unit?: TMetricUnit scaleId?: string @@ -191,6 +195,8 @@ export function createSeries( lineStyle = LineStyle.Solid, color = '#00ff00', visible = true, + lastValueVisible = true, + priceLineVisible = true, scaleId, scaleMargins, @@ -230,6 +236,8 @@ export function createSeries( color, style, lineStyle, + lastValueVisible, + priceLineVisible, unit, isSelectorLocked, @@ -359,6 +367,10 @@ export function createSeries( // default true -> undefined (omit from API) visible: metric.visible.$ && undefined, + // default true -> undefined (omit from API) + lastValueVisible: metric.ui.$$.lastValueVisible && undefined, + // default true -> undefined (omit from API) + priceLineVisible: metric.ui.$$.priceLineVisible && undefined, color: metric.ui.$$.color, style: metric.ui.$$.style, lineStyle: metric.ui.$$.lineStyle, diff --git a/src/lib/ui/app/Chart/series/RawSeries.svelte b/src/lib/ui/app/Chart/series/RawSeries.svelte index bf204f881..72da3c99d 100644 --- a/src/lib/ui/app/Chart/series/RawSeries.svelte +++ b/src/lib/ui/app/Chart/series/RawSeries.svelte @@ -77,8 +77,8 @@ }) $effect.pre(() => { - const { color, style, lineStyle } = ui.$$ - const options = { color } + const { color, style, lineStyle, lastValueVisible, priceLineVisible } = ui.$$ + const options = { color, lastValueVisible, priceLineVisible } if (style === MetricStyle.AREA) { Object.assign(options, getAreaSeriesColors(series), { lineStyle }) @@ -139,7 +139,12 @@ } function getSeriesTypeOptions() { - const base = { zOrder: 10, priceFormat: untrack(() => priceFormat) } + const base = { + zOrder: 10, + priceFormat: untrack(() => priceFormat), + lastValueVisible: ui.$$.lastValueVisible, + priceLineVisible: ui.$$.priceLineVisible, + } switch (ui.$$.style) { case MetricStyle.HISTOGRAM: diff --git a/src/stories/Design System - App UI/Chart/index.stories.ts b/src/stories/Design System - App UI/Chart/index.stories.ts index e655b12be..ffec337e0 100644 --- a/src/stories/Design System - App UI/Chart/index.stories.ts +++ b/src/stories/Design System - App UI/Chart/index.stories.ts @@ -527,6 +527,34 @@ export const MetricsRegistryCustomGranularityRules: Story = { }, } +export const LineValueIndicators: Story = { + args: { + defaultMetrics: [ + { + apiMetricName: 'price_usd', + label: 'Default Line (btc)', + scaleId: 'right-price_usd', + lastValueVisible: false, + priceLineVisible: false, + }, + { + apiMetricName: 'sentiment_volume_consumed_total', + label: 'Dotted Line (volume consumed)', + scaleId: 'right-sentiment_volume_consumed_total', + lastValueVisible: false, + priceLineVisible: false, + }, + { + apiMetricName: 'price_eth', + label: 'Dashed Area (eth)', + scaleId: 'right-price_eth', + lastValueVisible: true, + priceLineVisible: false, + }, + ], + }, +} + export const UnderMaintenanceMetric: Story = { args: { defaultMetrics: [