From 6ce5740e6446cb38793f89f6c495865f494b3bac Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Wed, 13 Jan 2021 18:33:18 -0600 Subject: [PATCH] GraphNG: uPlot 1.6, hide "Show points" in Points mode, enable "dot" lineStyle (#30263) --- .../dev-dashboards/panel-graph/graph-ng.json | 41 +++++++++++++++++++ packages/grafana-ui/package.json | 2 +- .../grafana-ui/src/components/uPlot/config.ts | 2 +- .../uPlot/config/UPlotSeriesBuilder.ts | 20 +++++---- .../panel/timeseries/LineStyleEditor.tsx | 8 ++-- public/app/plugins/panel/timeseries/config.ts | 1 + yarn.lock | 8 ++-- 7 files changed, 64 insertions(+), 18 deletions(-) diff --git a/devenv/dev-dashboards/panel-graph/graph-ng.json b/devenv/dev-dashboards/panel-graph/graph-ng.json index 0fa21f3d458..2f7b71d8399 100644 --- a/devenv/dev-dashboards/panel-graph/graph-ng.json +++ b/devenv/dev-dashboards/panel-graph/graph-ng.json @@ -1156,6 +1156,21 @@ "id": "custom.lineStyle" } ] + }, + { + "matcher": { + "id": "byName", + "options": "F-series" + }, + "properties": [ + { + "id": "custom.lineStyle", + "value": { + "dash": [0, 10], + "fill": "dot" + } + } + ] } ] }, @@ -1311,6 +1326,32 @@ "type": "signal" }, "stringInput": "6,6" + }, + { + "points": [], + "stream": { + "type": "signal", + "speed": 250, + "spread": 3.5, + "noise": 2.2, + "bands": 1 + }, + "pulseWave": { + "timeStep": 60, + "onCount": 3, + "onValue": 2, + "offCount": 3, + "offValue": 1 + }, + "csvWave": { + "timeStep": 60, + "valuesCSV": "0,0,2,2,1,1" + }, + "stringInput": "5,5", + "scenarioId": "csv_metric_values", + "lines": 10, + "refId": "F", + "alias": "" } ], "timeFrom": null, diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 6f4811381fe..6c1138ccae8 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -71,7 +71,7 @@ "react-transition-group": "4.4.1", "slate": "0.47.8", "tinycolor2": "1.4.1", - "uplot": "1.5.2" + "uplot": "1.6.0" }, "devDependencies": { "@rollup/plugin-commonjs": "16.0.0", diff --git a/packages/grafana-ui/src/components/uPlot/config.ts b/packages/grafana-ui/src/components/uPlot/config.ts index 732b72dd775..c7c7d489f19 100644 --- a/packages/grafana-ui/src/components/uPlot/config.ts +++ b/packages/grafana-ui/src/components/uPlot/config.ts @@ -52,7 +52,7 @@ export enum ScaleDistribution { * @alpha */ export interface LineStyle { - fill?: 'solid' | 'dash' | 'dot' | 'square'; // cap = 'butt' | 'round' | 'square' + fill?: 'solid' | 'dash' | 'dot' | 'square'; dash?: number[]; } diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts index bffd0785dd1..5636d6c78b5 100755 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts @@ -43,7 +43,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder { lineConfig.width = lineWidth; if (lineStyle && lineStyle.fill !== 'solid') { if (lineStyle.fill === 'dot') { - // lineConfig.dashCap = 'round'; // square or butt + lineConfig.cap = 'round'; } lineConfig.dash = lineStyle.dash ?? [10, 10]; } @@ -62,14 +62,18 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder { }; // we cannot set points.show property above (even to undefined) as that will clear uPlot's default auto behavior - if (showPoints === PointVisibility.Auto) { - if (drawStyle === DrawStyle.Bars) { - pointsConfig.points!.show = false; - } - } else if (showPoints === PointVisibility.Never) { - pointsConfig.points!.show = false; - } else if (showPoints === PointVisibility.Always) { + if (drawStyle === DrawStyle.Points) { pointsConfig.points!.show = true; + } else { + if (showPoints === PointVisibility.Auto) { + if (drawStyle === DrawStyle.Bars) { + pointsConfig.points!.show = false; + } + } else if (showPoints === PointVisibility.Never) { + pointsConfig.points!.show = false; + } else if (showPoints === PointVisibility.Always) { + pointsConfig.points!.show = true; + } } return { diff --git a/public/app/plugins/panel/timeseries/LineStyleEditor.tsx b/public/app/plugins/panel/timeseries/LineStyleEditor.tsx index f73ab3b8a7d..c90b08afd25 100644 --- a/public/app/plugins/panel/timeseries/LineStyleEditor.tsx +++ b/public/app/plugins/panel/timeseries/LineStyleEditor.tsx @@ -13,10 +13,10 @@ const lineFillOptions: Array> = [ label: 'Dash', value: 'dash', }, - // { - // label: 'Dots', - // value: 'dot', - // }, + { + label: 'Dots', + value: 'dot', + }, ]; const dashOptions: Array> = [ diff --git a/public/app/plugins/panel/timeseries/config.ts b/public/app/plugins/panel/timeseries/config.ts index 0a23b91f2eb..4cc32c78e44 100644 --- a/public/app/plugins/panel/timeseries/config.ts +++ b/public/app/plugins/panel/timeseries/config.ts @@ -115,6 +115,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption settings: { options: graphFieldOptions.showPoints, }, + showIf: c => c.drawStyle !== DrawStyle.Points, }) .addSliderInput({ path: 'pointSize', diff --git a/yarn.lock b/yarn.lock index f6bb4553ac8..4a5c9960e22 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25535,10 +25535,10 @@ update-notifier@^2.5.0: semver-diff "^2.0.0" xdg-basedir "^3.0.0" -uplot@1.5.2: - version "1.5.2" - resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.5.2.tgz#758e894b6e9c1d864b50a82aef50d392212d20de" - integrity sha512-GK/orAJjCz1thBiQUAzwCVur016z/0m/vmoxCU8kWXwbn4HnYBsKQ2Iixxj8fPy+uA9Pa7m99U+D/zXxMuo3gQ== +uplot@1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.0.tgz#c91317d4defcf0406c9fb1cbbfcabc2dcaa78230" + integrity sha512-Xv25lGDHB5MdUwVwO8MDbhzyCrg6bgfiQwBBzLF9xhwyQStzTLzQlQarmYUkuzEjrHMRkH2vvLnK1XvjiNeDbw== upper-case@^1.1.1: version "1.1.3"