From 113daee5ad8d9879057ad433af3d4fd0a37f167d Mon Sep 17 00:00:00 2001
From: John Walley <john@walley.org.uk>
Date: Mon, 25 Jul 2022 10:47:59 +0100
Subject: [PATCH] fix: apply vector-effect: non-scaling-stroke to svg path
 element (#835)

Also avoid passing a class called undefined to the svg element
---
 libs/ui-toolkit/src/components/sparkline/sparkline.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/libs/ui-toolkit/src/components/sparkline/sparkline.tsx b/libs/ui-toolkit/src/components/sparkline/sparkline.tsx
index bfde9c673..1481bf360 100644
--- a/libs/ui-toolkit/src/components/sparkline/sparkline.tsx
+++ b/libs/ui-toolkit/src/components/sparkline/sparkline.tsx
@@ -1,6 +1,7 @@
 import { extent } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
 import { line } from 'd3-shape';
+import classNames from 'classnames';
 import isEqual from 'lodash/isEqual';
 import React from 'react';
 
@@ -84,7 +85,7 @@ export const SparklineView = ({
   return (
     <svg
       data-testid="sparkline-svg"
-      className={`pt-px pr-0 w-full overflow-visible ${className}`}
+      className={classNames('pt-px pr-0 w-full overflow-visible', className)}
       width={width}
       height={height}
       viewBox="0 0 100 100"
@@ -104,7 +105,7 @@ export const SparklineView = ({
         <path
           data-testid="sparkline-path"
           d={mainPath}
-          className={strokeClassName}
+          className={`[vector-effect:non-scaling-stroke] ${strokeClassName}`}
           stroke="strokeCurrent"
           strokeWidth={2}
           fill="transparent"