BarChart: inside-align strokes, upgrade uPlot to 1.6.4. (#30806)

packages/grafana-ui/package.json

@@ -72,7 +72,7 @@
     "react-transition-group": "4.4.1",
     "react-transition-group": "4.4.1",
     "slate": "0.47.8",
     "slate": "0.47.8",
     "tinycolor2": "1.4.1",
     "tinycolor2": "1.4.1",
-    "uplot": "1.6.3"
+    "uplot": "1.6.4"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-commonjs": "16.0.0",

packages/grafana-ui/src/components/BarChart/BarChart.tsx

@@ -165,8 +165,10 @@ export const BarChart: React.FunctionComponent<Props> = ({
 
 
       builder.addSeries({
       builder.addSeries({
         scaleKey,
         scaleKey,
+        pxAlign: false,
         lineWidth: customConfig.lineWidth,
         lineWidth: customConfig.lineWidth,
         lineColor: seriesColor,
         lineColor: seriesColor,
+        //lineStyle: customConfig.lineStyle,
         fillOpacity: customConfig.fillOpacity,
         fillOpacity: customConfig.fillOpacity,
         theme,
         theme,
         colorMode,
         colorMode,
@@ -176,12 +178,6 @@ export const BarChart: React.FunctionComponent<Props> = ({
         gradientMode: customConfig.gradientMode,
         gradientMode: customConfig.gradientMode,
         thresholds: field.config.thresholds,
         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
         // The following properties are not used in the uPlot config, but are utilized as transport for legend config
         dataFrameFieldIndex: {
         dataFrameFieldIndex: {
           fieldIndex: i,
           fieldIndex: i,

packages/grafana-ui/src/components/BarChart/bars.ts

@@ -64,6 +64,7 @@ export function getConfig(opts: BarsOptions) {
       sidx,
       sidx,
       (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect) => {
       (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect) => {
         const fill = new Path2D();
         const fill = new Path2D();
+        const stroke = new Path2D();
 
 
         let numGroups = dataX.length;
         let numGroups = dataX.length;
         let barsPerGroup = u.series.length - 1;
         let barsPerGroup = u.series.length - 1;
@@ -83,6 +84,12 @@ export function getConfig(opts: BarsOptions) {
             let top = Math.round(Math.min(yPos, y0Pos));
             let top = Math.round(Math.min(yPos, y0Pos));
             let barHgt = btm - top;
             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);
             rect(fill, lft, top, barWid, barHgt);
 
 
             let x = ori === 0 ? Math.round(lft - xOff) : Math.round(top - yOff);
             let x = ori === 0 ? Math.round(lft - xOff) : Math.round(top - yOff);
@@ -95,7 +102,7 @@ export function getConfig(opts: BarsOptions) {
         });
         });
 
 
         return {
         return {
-          stroke: fill,
+          stroke,
           fill,
           fill,
         };
         };
       }
       }

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts

@@ -469,6 +469,7 @@ describe('UPlotConfigBuilder', () => {
               "size": 5,
               "size": 5,
               "stroke": "#00ff00",
               "stroke": "#00ff00",
             },
             },
+            "pxAlign": undefined,
             "scale": "scale-x",
             "scale": "scale-x",
             "show": true,
             "show": true,
             "spanGaps": false,
             "spanGaps": false,

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 {
 export interface SeriesProps extends LineConfig, BarConfig, FillConfig, PointsConfig {
   scaleKey: string;
   scaleKey: string;
+  pxAlign?: boolean;
   gradientMode?: GraphGradientMode;
   gradientMode?: GraphGradientMode;
   /** Used when gradientMode is set to Scheme */
   /** Used when gradientMode is set to Scheme */
   thresholds?: ThresholdsConfig;
   thresholds?: ThresholdsConfig;
@@ -46,6 +47,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
       pointColor,
       pointColor,
       pointSize,
       pointSize,
       scaleKey,
       scaleKey,
+      pxAlign,
       spanNulls,
       spanNulls,
       show = true,
       show = true,
     } = this.props;
     } = this.props;
@@ -103,6 +105,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
     return {
     return {
       scale: scaleKey,
       scale: scaleKey,
       spanGaps: spanNulls,
       spanGaps: spanNulls,
+      pxAlign,
       show,
       show,
       fill: this.getFill(),
       fill: this.getFill(),
       ...lineConfig,
       ...lineConfig,

yarn.lock

@@ -26041,10 +26041,10 @@ update-notifier@^2.5.0:
     semver-diff "^2.0.0"
     semver-diff "^2.0.0"
     xdg-basedir "^3.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:
 upper-case@^1.1.1:
   version "1.1.3"
   version "1.1.3"