From b5400922e2093bbc597b81c2953f013aede4fd90 Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Tue, 2 Feb 2021 11:49:45 -0600
Subject: [PATCH] BarChart: inside-align strokes, upgrade uPlot to 1.6.4.
 (#30806)

---
 packages/grafana-ui/package.json                         | 2 +-
 packages/grafana-ui/src/components/BarChart/BarChart.tsx | 8 ++------
 packages/grafana-ui/src/components/BarChart/bars.ts      | 9 ++++++++-
 .../components/uPlot/config/UPlotConfigBuilder.test.ts   | 1 +
 .../src/components/uPlot/config/UPlotSeriesBuilder.ts    | 3 +++
 yarn.lock                                                | 8 ++++----
 6 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 8da2e491115..0247c5a8c2c 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -72,7 +72,7 @@
     "react-transition-group": "4.4.1",
     "slate": "0.47.8",
     "tinycolor2": "1.4.1",
-    "uplot": "1.6.3"
+    "uplot": "1.6.4"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "16.0.0",
diff --git a/packages/grafana-ui/src/components/BarChart/BarChart.tsx b/packages/grafana-ui/src/components/BarChart/BarChart.tsx
index 21be6bafe34..e46aea8afbe 100644
--- a/packages/grafana-ui/src/components/BarChart/BarChart.tsx
+++ b/packages/grafana-ui/src/components/BarChart/BarChart.tsx
@@ -165,8 +165,10 @@ export const BarChart: React.FunctionComponent<Props> = ({
 
       builder.addSeries({
         scaleKey,
+        pxAlign: false,
         lineWidth: customConfig.lineWidth,
         lineColor: seriesColor,
+        //lineStyle: customConfig.lineStyle,
         fillOpacity: customConfig.fillOpacity,
         theme,
         colorMode,
@@ -176,12 +178,6 @@ export const BarChart: React.FunctionComponent<Props> = ({
         gradientMode: customConfig.gradientMode,
         thresholds: field.config.thresholds,
 
-        /*
-          lineColor: customConfig.lineColor ?? seriesColor,
-          lineWidth: customConfig.lineWidth,
-          lineStyle: customConfig.lineStyle,
-          */
-
         // The following properties are not used in the uPlot config, but are utilized as transport for legend config
         dataFrameFieldIndex: {
           fieldIndex: i,
diff --git a/packages/grafana-ui/src/components/BarChart/bars.ts b/packages/grafana-ui/src/components/BarChart/bars.ts
index f40bdaa1c9b..0012a03cd97 100644
--- a/packages/grafana-ui/src/components/BarChart/bars.ts
+++ b/packages/grafana-ui/src/components/BarChart/bars.ts
@@ -64,6 +64,7 @@ export function getConfig(opts: BarsOptions) {
       sidx,
       (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect) => {
         const fill = new Path2D();
+        const stroke = new Path2D();
 
         let numGroups = dataX.length;
         let barsPerGroup = u.series.length - 1;
@@ -83,6 +84,12 @@ export function getConfig(opts: BarsOptions) {
             let top = Math.round(Math.min(yPos, y0Pos));
             let barHgt = btm - top;
 
+            let strokeWidth = series.width || 0;
+
+            if (strokeWidth) {
+              rect(stroke, lft + strokeWidth / 2, top + strokeWidth / 2, barWid - strokeWidth, barHgt - strokeWidth);
+            }
+
             rect(fill, lft, top, barWid, barHgt);
 
             let x = ori === 0 ? Math.round(lft - xOff) : Math.round(top - yOff);
@@ -95,7 +102,7 @@ export function getConfig(opts: BarsOptions) {
         });
 
         return {
-          stroke: fill,
+          stroke,
           fill,
         };
       }
diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
index f177eda7e88..82211932072 100644
--- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
+++ b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
@@ -469,6 +469,7 @@ describe('UPlotConfigBuilder', () => {
               "size": 5,
               "stroke": "#00ff00",
             },
+            "pxAlign": undefined,
             "scale": "scale-x",
             "show": true,
             "spanGaps": false,
diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
index 6ece0f19295..ca6bc9da7f4 100755
--- a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
+++ b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
@@ -17,6 +17,7 @@ import { getHueGradientFn, getOpacityGradientFn, getScaleGradientFn } from './gr
 
 export interface SeriesProps extends LineConfig, BarConfig, FillConfig, PointsConfig {
   scaleKey: string;
+  pxAlign?: boolean;
   gradientMode?: GraphGradientMode;
   /** Used when gradientMode is set to Scheme */
   thresholds?: ThresholdsConfig;
@@ -46,6 +47,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
       pointColor,
       pointSize,
       scaleKey,
+      pxAlign,
       spanNulls,
       show = true,
     } = this.props;
@@ -103,6 +105,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
     return {
       scale: scaleKey,
       spanGaps: spanNulls,
+      pxAlign,
       show,
       fill: this.getFill(),
       ...lineConfig,
diff --git a/yarn.lock b/yarn.lock
index 0daa41c5896..bf23239b3fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -26041,10 +26041,10 @@ update-notifier@^2.5.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
-uplot@1.6.3:
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.3.tgz#85b21f59b2e9db24976aa688cb267d950dfa45b5"
-  integrity sha512-aSqtBqJRqO7KkuZxRxVGumDi7+293HsBCdzg9HbOYkRZ8lxf2utLpkAu4oljejlwYy1zrn7DXBSvcZ5wnWig9w==
+uplot@1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.4.tgz#016e9f66796d78c187957e710743f7ca405dfb4d"
+  integrity sha512-4d6JixG54HQKFDLAegzwgwf87GtEbp6pt3YlHygyLt+mJ9RHneCXYlZxr1QOhLetoSSHeeDuWP5RFMv8mdltpg==
 
 upper-case@^1.1.1:
   version "1.1.3"