diff --git a/frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts b/frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts index 62f88d9fac..d69af29486 100644 --- a/frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts +++ b/frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts @@ -5,8 +5,8 @@ import uPlot, { Series } from 'uplot'; import { ConfigBuilder, DrawStyle, - FillStyle, LineInterpolation, + LineStyle, SeriesProps, VisibilityMode, } from './types'; @@ -16,23 +16,29 @@ import { * Handles creation of series settings */ export class UPlotSeriesBuilder extends ConfigBuilder { - private buildLineConfig( - lineColor: string, - lineWidth?: number, - lineStyle?: { fill?: FillStyle; dash?: number[] }, - ): Partial { + private buildLineConfig({ + lineColor, + lineWidth, + lineStyle, + lineCap, + }: { + lineColor: string; + lineWidth?: number; + lineStyle?: LineStyle; + lineCap?: Series.Cap; + }): Partial { const lineConfig: Partial = { stroke: lineColor, width: lineWidth ?? 2, }; - if (lineStyle && lineStyle.fill !== FillStyle.Solid) { - if (lineStyle.fill === FillStyle.Dot) { - lineConfig.cap = 'round'; - } - lineConfig.dash = lineStyle.dash ?? [10, 10]; + if (lineStyle === LineStyle.Dashed) { + lineConfig.dash = [10, 10]; } + if (lineCap) { + lineConfig.cap = lineCap; + } return lineConfig; } @@ -138,6 +144,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder { lineInterpolation, lineWidth, lineStyle, + lineCap, showPoints, pointSize, scaleKey, @@ -148,7 +155,12 @@ export class UPlotSeriesBuilder extends ConfigBuilder { const lineColor = this.getLineColor(); - const lineConfig = this.buildLineConfig(lineColor, lineWidth, lineStyle); + const lineConfig = this.buildLineConfig({ + lineColor, + lineWidth, + lineStyle, + lineCap, + }); const pathConfig = this.buildPathConfig({ pathBuilder, drawStyle, diff --git a/frontend/src/lib/uPlotV2/config/types.ts b/frontend/src/lib/uPlotV2/config/types.ts index 9a8dc2e214..cf7a508b59 100644 --- a/frontend/src/lib/uPlotV2/config/types.ts +++ b/frontend/src/lib/uPlotV2/config/types.ts @@ -92,16 +92,9 @@ export interface ScaleProps { * Props for configuring a series */ -export enum FillStyle { +export enum LineStyle { Solid = 'solid', - Dash = 'dash', - Dot = 'dot', - Square = 'square', -} - -export interface LineStyle { - dash?: Array; - fill?: FillStyle; + Dashed = 'dashed', } export enum DrawStyle { @@ -141,6 +134,7 @@ export interface SeriesProps { lineInterpolation?: LineInterpolation; lineStyle?: LineStyle; lineWidth?: number; + lineCap?: Series.Cap; // Points config pointColor?: string;