ChartColorInputs line type dashed to use 6,6 and dotted to be 0.1,6 with linecap round

Author: cnathe

packages/components/src/internal/components/chart/ChartColorInputs.test.tsx

@@ -152,27 +152,29 @@ describe('SeriesOptionRenderer', () => {
 
 describe('LineTypeOptionRenderer', () => {
     test('isValueRenderer false', () => {
-        render(<LineTypeOptionRenderer isValueRenderer={false} strokeValue="" />);
+        render(<LineTypeOptionRenderer isValueRenderer={false} label="Solid" value="" />);
         expect(document.querySelectorAll('.chart-builder-type-option')).toHaveLength(1);
         expect(document.querySelectorAll('.chart-builder-type-option--value')).toHaveLength(0);
-        expect(document.querySelector('svg path').getAttribute('stroke-dasharray')).toBe('');
+        expect(document.querySelector('svg path').getAttribute('stroke-dasharray')).toBe(null);
     });
 
     test('isValueRenderer true', () => {
-        render(<LineTypeOptionRenderer isValueRenderer strokeValue="" />);
+        render(<LineTypeOptionRenderer isValueRenderer label="Solid" value="" />);
         expect(document.querySelectorAll('.chart-builder-type-option')).toHaveLength(1);
         expect(document.querySelectorAll('.chart-builder-type-option--value')).toHaveLength(1);
-        expect(document.querySelector('svg path').getAttribute('stroke-dasharray')).toBe('');
+        expect(document.querySelector('svg path').getAttribute('stroke-dasharray')).toBe(null);
     });
 
     test('dashed line type', () => {
-        render(<LineTypeOptionRenderer isValueRenderer strokeValue="12, 3" />);
-        expect(document.querySelector('svg path').getAttribute("stroke-dasharray")).toBe('12, 3');
+        render(<LineTypeOptionRenderer isValueRenderer label="Dashed" value="dashed" />);
+        expect(document.querySelector('svg path').getAttribute("stroke-dasharray")).toBe('6,6');
+        expect(document.querySelector('svg path').getAttribute("stroke-linecap")).toBe(null);
     });
 
     test('dotted line type', () => {
-        render(<LineTypeOptionRenderer isValueRenderer strokeValue="1, 1" />);
-        expect(document.querySelector('svg path').getAttribute("stroke-dasharray")).toBe('1, 1');
+        render(<LineTypeOptionRenderer isValueRenderer label="Dotted" value="dotted" />);
+        expect(document.querySelector('svg path').getAttribute("stroke-dasharray")).toBe('0.1,6');
+        expect(document.querySelector('svg path').getAttribute("stroke-linecap")).toBe('round');
     });
 });
 

packages/components/src/internal/components/chart/ChartColorInputs.tsx

@@ -86,28 +86,37 @@ function shapeValueRenderer(option) {
 interface LineTypeOptionRendererProps {
     isValueRenderer: boolean;
     label: string;
-    strokeValue: string;
+    value: string;
 }
 
 // export for jest testing
-export const LineTypeOptionRenderer: FC<LineTypeOptionRendererProps> = memo(({ label, strokeValue, isValueRenderer }) => {
+export const LineTypeOptionRenderer: FC<LineTypeOptionRendererProps> = memo(({ label, value, isValueRenderer }) => {
     const className = classNames('chart-builder-type-option', { 'chart-builder-type-option--value': isValueRenderer });
+    const strokeValue = value === 'dashed' ? '6,6' : value === 'dotted' ? '0.1,6' : undefined;
+    const strokeLineCap = value === 'dotted' ? 'round' : undefined;
     return (
         <span className={className} data-series-linetype={label}>
-            <svg height="10" width="30">
-                <path d="M 0 5 H 30" fill="none" stroke="#000000" strokeDasharray={strokeValue} strokeWidth="3" />
+            <svg height="10" width="25">
+                <path
+                    d="M 5 5 H 25"
+                    fill="none"
+                    stroke="#000000"
+                    strokeDasharray={strokeValue}
+                    strokeLinecap={strokeLineCap}
+                    strokeWidth="3"
+                />
             </svg>
         </span>
     );
 });
 LineTypeOptionRenderer.displayName = 'LineTypeOptionRenderer';
 
 function lineTypeOptionRenderer(option) {
-    return <LineTypeOptionRenderer isValueRenderer={false} label={option.data.label} strokeValue={option.data.value} />;
+    return <LineTypeOptionRenderer isValueRenderer={false} label={option.data.label} value={option.data.value} />;
 }
 
 function lineTypeValueRenderer(option) {
-    return <LineTypeOptionRenderer isValueRenderer label={option.data.label} strokeValue={option.data.value} />;
+    return <LineTypeOptionRenderer isValueRenderer label={option.data.label} value={option.data.value} />;
 }
 
 interface SeriesOptionRendererProps {

packages/components/src/internal/components/chart/constants.ts

@@ -35,12 +35,10 @@ export const SHAPE_OPTIONS = [
     { label: 'Cross', value: 'x' },
 ];
 
-export const LINE_TYPE_STROKES = { dashed: '12, 3', dotted: '2, 2', solid: '' };
-
 export const LINE_TYPE_OPTIONS = [
-    { label: 'Solid', value: LINE_TYPE_STROKES.solid },
-    { label: 'Dashed', value: LINE_TYPE_STROKES.dashed },
-    { label: 'Dotted', value: LINE_TYPE_STROKES.dotted },
+    { label: 'Solid', value: '' },
+    { label: 'Dashed', value: 'dashed' },
+    { label: 'Dotted', value: 'dotted' },
 ];
 
 export const COLOR_OPTIONS_PER_TYPE = {

packages/components/src/theme/charts.scss

@@ -225,6 +225,9 @@
 .chart-color-input {
     flex: 1;
 }
+.chart-color-input label {
+    display: block;
+}
 
 .chart-builder-modal__chart-preview h4,
 .chart-settings h4 {