feat: added line style customization per property

packages/dashboard/src/customization/propertiesSections/components/lineStyleDropdown.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { FC } from 'react';
+import { FormField, Select } from '@cloudscape-design/components';
+
+const defaultLineStyleOption = { label: 'Solid', value: 'solid' };
+const lineStyleOptions = [
+  defaultLineStyleOption,
+  { label: 'Dashed', value: 'dashed' },
+  { label: 'Dotted', value: 'dotted' },
+] as const;
+
+type LineStyleDropdownProps = {
+  disabled?: boolean;
+  lineStyle?: string;
+  updatelineStyle: (lineStyle: string) => void;
+};
+
+export const LineStyleDropdown: FC<LineStyleDropdownProps> = ({ disabled = false, lineStyle, updatelineStyle }) => {
+  return (
+    <FormField label='Style'>
+      <Select
+        disabled={disabled}
+        selectedOption={
+          // Find the line style option that matches the currently selected line style
+          lineStyleOptions.find(({ value }) => value === lineStyle) ?? null
+        }
+        onChange={({ detail }) =>
+          // Update the line style with the selected option value
+          updatelineStyle(detail.selectedOption.value ?? defaultLineStyleOption.value)
+        }
+        options={lineStyleOptions} // List of line style options
+      />
+    </FormField>
+  );
+};

packages/dashboard/src/customization/propertiesSections/components/lineThicknessDropdown.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { FC } from 'react';
+
+import { FormField, Select } from '@cloudscape-design/components';
+
+const defaultLineThicknessOption = { label: 'Normal', value: 'normal' };
+const lineThicknessOptions = [
+  { label: 'Thin', value: 'thin' },
+  defaultLineThicknessOption,
+  { label: 'Thick', value: 'thick' },
+] as const;
+
+type LineThicknessDropdownProps = {
+  disabled?: boolean;
+};
+
+export const LineThicknessDropdown: FC<LineThicknessDropdownProps> = ({ disabled = false }) => {
+  return (
+    <FormField label='Thickness'>
+      <Select
+        disabled={disabled}
+        selectedOption={lineThicknessOptions.find(({ value }) => value === 'normal') ?? null}
+        options={lineThicknessOptions}
+      />
+    </FormField>
+  );
+};

packages/dashboard/src/customization/propertiesSections/lineAndScatterStyleSettings/lineStyleSection.tsx

@@ -1,31 +1,24 @@
-import ExpandableSection from '@cloudscape-design/components/expandable-section';
-import FormField from '@cloudscape-design/components/form-field';
-import Select from '@cloudscape-design/components/select';
-import type { FC } from 'react';
 import React from 'react';
+import type { FC } from 'react';
+
+import ExpandableSection from '@cloudscape-design/components/expandable-section';
 
-const defaultLineStyleOption = { label: 'Solid', value: 'solid' };
-const lineStyleOptions = [
-  defaultLineStyleOption,
-  { label: 'Dashed', value: 'dashed' },
-  { label: 'Dotted', value: 'dotted' },
-] as const;
+import { LineStyleDropdown } from '../components/lineStyleDropdown';
+import { LineThicknessDropdown } from '../components/lineThicknessDropdown';
+import { SpaceBetween } from '@cloudscape-design/components';
 
 type LineStyleSectionOptions = {
-  lineStyle: string | undefined;
+  lineStyle?: string;
   updatelineStyle: (lineStyle: string) => void;
 };
 
 export const LineStyleSection: FC<LineStyleSectionOptions> = ({ lineStyle, updatelineStyle }) => {
   return (
     <ExpandableSection headerText='Line style' defaultExpanded>
-      <FormField label='Style'>
-        <Select
-          selectedOption={lineStyleOptions.find(({ value }) => value === lineStyle) ?? null}
-          onChange={({ detail }) => updatelineStyle(detail.selectedOption.value ?? defaultLineStyleOption.value)}
-          options={lineStyleOptions}
-        />
-      </FormField>
+      <SpaceBetween size='m'>
+        <LineStyleDropdown lineStyle={lineStyle} updatelineStyle={updatelineStyle} />
+        <LineThicknessDropdown /> {/* TODO */}
+      </SpaceBetween>
     </ExpandableSection>
   );
 };

packages/dashboard/src/customization/propertiesSections/propertiesAndAlarmsSettings/styledPropertyComponent.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import type { FC } from 'react';
 import {
   Button,
   SpaceBetween,
@@ -9,20 +10,71 @@ import {
   FormField,
   Input,
 } from '@cloudscape-design/components';
-import ColorPicker from '../shared/colorPicker';
-import type { FC } from 'react';
+import { spaceStaticXxs } from '@cloudscape-design/design-tokens';
+import { ClickDetail, NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
 
-import './propertyComponent.css';
-import { StyledAssetPropertyQuery, YAxisOptions } from '~/customization/widgets/types';
+import ColorPicker from '../shared/colorPicker';
+import { LineStyles, StyledAssetPropertyQuery, YAxisOptions } from '~/customization/widgets/types';
 import { getPropertyDisplay } from './getPropertyDisplay';
 import type { AssetSummary } from '~/hooks/useAssetDescriptionQueries';
 import {
   StatusEyeHidden,
   StatusEyeVisible,
 } from '~/customization/propertiesSections/propertiesAndAlarmsSettings/icons';
-import { ClickDetail, NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
 import Tooltip from '~/components/tooltip/tooltip';
-import { spaceStaticXxs } from '@cloudscape-design/design-tokens';
+import { LineStyleDropdown } from '../components/lineStyleDropdown';
+import { LineThicknessDropdown } from '../components/lineThicknessDropdown';
+
+import './propertyComponent.css';
+
+const LineStylePropertyConfig = ({
+  resetStyles,
+  property,
+  onUpdate,
+}: {
+  resetStyles: (reset: object) => void;
+  property: StyledAssetPropertyQuery;
+  onUpdate: (newStyles: object) => void;
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const [useGlobalStyle, setUseGlobalStyle] = useState<boolean>(!property.line?.style); //make useGlobalStyle true if no line style
+  const [lineStyle, setLineStyle] = useState<LineStyles['style']>(property.line?.style ?? 'solid');
+
+  const onToggleUseGlobalStyles = (isChecked: boolean) => {
+    setUseGlobalStyle(isChecked);
+    setLineStyle('solid');
+    if (isChecked) {
+      resetStyles({ line: { style: undefined } });
+    } else {
+      onUpdate({ line: { style: lineStyle } });
+    }
+  };
+
+  const updateLineStyle = (style: LineStyles['style']) => {
+    setLineStyle(style);
+    onUpdate({ line: { style } });
+  };
+
+  return (
+    <ExpandableSection
+      expanded={expanded}
+      onChange={({ detail }) => setExpanded(detail.expanded)}
+      headerText='Line style'
+    >
+      <SpaceBetween size='m'>
+        <Checkbox onChange={({ detail }) => onToggleUseGlobalStyles(detail.checked)} checked={useGlobalStyle}>
+          Use default style
+        </Checkbox>
+        <LineStyleDropdown
+          disabled={useGlobalStyle}
+          lineStyle={lineStyle}
+          updatelineStyle={(style) => updateLineStyle(style as LineStyles['style'])}
+        />
+        <LineThicknessDropdown disabled={useGlobalStyle} /> {/* TODO */}
+      </SpaceBetween>
+    </ExpandableSection>
+  );
+};
 
 const numberOrUndefined = (number: string) => {
   const parsed = Number(number);
@@ -173,6 +225,7 @@ export const StyledPropertyComponent: FC<StyledPropertyComponentProps> = ({
             <SpaceBetween size='xs' direction='horizontal'>
               <ExpandableSection headerText={YAxisHeader}>
                 <div style={{ padding: '0 24px', backgroundColor: '#fbfbfb' }}>
+                  <LineStylePropertyConfig resetStyles={resetStyles} onUpdate={updateStyle} property={property} />
                   <YAxisPropertyConfig resetStyles={resetStyles} onUpdate={updateStyle} property={property} />
                 </div>
               </ExpandableSection>