feat: Replace graph fields with graph series for more customization

src/components/Dropdown/Dropdown.react.js

@@ -22,6 +22,19 @@ export default class Dropdown extends React.Component {
     };
 
     this.dropdownRef = React.createRef();
+    this.menuRef = React.createRef();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    // When dropdown opens, scroll to the selected item
+    if (this.state.open && !prevState.open && this.menuRef.current) {
+      const menu = this.menuRef.current;
+      const selectedButton = menu.querySelector('button[data-selected="true"]');
+      if (selectedButton) {
+        // Scroll so the selected item is at the top of the visible list
+        menu.scrollTop = selectedButton.offsetTop;
+      }
+    }
   }
 
   toggle() {
@@ -66,9 +79,13 @@ export default class Dropdown extends React.Component {
       const width = this.dropdownRef.current.clientWidth;
       const popoverChildren = (
         <SliderWrap direction={Directions.DOWN} expanded={true}>
-          <div style={{ width }} className={styles.menu}>
-            {React.Children.map(this.props.children, c => (
-              <button type="button" onClick={this.select.bind(this, c.props.value)}>
+          <div style={{ width }} className={styles.menu} ref={this.menuRef}>
+            {React.Children.map(this.props.children, c => c && (
+              <button
+                type="button"
+                onClick={this.select.bind(this, c.props.value)}
+                data-selected={c.props.value === this.props.value ? 'true' : undefined}
+              >
                 {c}
               </button>
             ))}
@@ -87,7 +104,7 @@ export default class Dropdown extends React.Component {
     }
     let content = null;
     React.Children.forEach(this.props.children, c => {
-      if (!content && c.props.value === this.props.value) {
+      if (!content && c && c.props.value === this.props.value) {
         content = c;
       }
     });

src/components/GraphPanel/GraphPanel.react.js

@@ -157,12 +157,11 @@ const GraphPanel = ({
       chartType,
       xColumn,
       yColumn,
-      valueColumn,
+      series,
       groupByColumn,
-      aggregationType,
       maxDataPoints,
       calculatedValues,
-      secondaryYAxisType,
+      strokeWidthOverride,
     } = graphConfig;
 
     // Limit data points for performance
@@ -176,38 +175,19 @@ const GraphPanel = ({
           break;
         case 'pie':
         case 'doughnut':
-          result = processPieData(limitedData, valueColumn, groupByColumn, aggregationType, calculatedValues);
+          result = processPieData(limitedData, series || [], groupByColumn, calculatedValues);
           break;
         case 'bar':
         case 'line':
         case 'radar':
-          result = processBarLineData(limitedData, xColumn, valueColumn, groupByColumn, aggregationType, calculatedValues);
+          result = processBarLineData(limitedData, xColumn, series || [], groupByColumn, calculatedValues);
           break;
       }
 
-      // Apply secondary Y-axis chart type to datasets on secondary axis
-      if (result && result.datasets && secondaryYAxisType && (chartType === 'bar' || chartType === 'line')) {
-        result.datasets = result.datasets.map(dataset => {
-          if (dataset.yAxisID === 'y1') {
-            return {
-              ...dataset,
-              type: secondaryYAxisType,
-            };
-          }
-          return dataset;
-        });
-      }
-
       // Helper to compute the effective chart type for a dataset
-      // dataset.type overrides global defaults (set by secondary Y-axis type or other means)
+      // dataset.type overrides the global chart type
       const getEffectiveType = (dataset) => {
-        if (dataset.type) {
-          return dataset.type;
-        }
-        if (dataset.yAxisID === 'y1' && secondaryYAxisType) {
-          return secondaryYAxisType;
-        }
-        return chartType;
+        return dataset.type || chartType;
       };
 
       // Apply line styles to datasets (convert lineStyle to Chart.js borderDash)
@@ -220,10 +200,15 @@ const GraphPanel = ({
 
         result.datasets = result.datasets.map(dataset => {
           const effectiveType = getEffectiveType(dataset);
-          if (effectiveType === 'line' && dataset.lineStyle && lineStyleToBorderDash[dataset.lineStyle]) {
+          if (effectiveType === 'line') {
+            // Line charts get custom or default stroke width and optional dash pattern
+            // strokeWidthOverride takes precedence over individual series strokeWidth
             return {
               ...dataset,
-              borderDash: lineStyleToBorderDash[dataset.lineStyle],
+              borderWidth: strokeWidthOverride || dataset.strokeWidth || 2,
+              ...(dataset.lineStyle && lineStyleToBorderDash[dataset.lineStyle]
+                ? { borderDash: lineStyleToBorderDash[dataset.lineStyle] }
+                : {}),
             };
           }
           return dataset;

src/components/TextInput/TextInput.react.js

@@ -64,7 +64,7 @@ class TextInput extends React.Component {
         type={this.props.hidden ? 'password' : 'text'}
         disabled={!!this.props.disabled}
         className={classes.join(' ')}
-        style={{ height: this.props.height || 80 }}
+        style={{ height: this.props.height || 80, ...this.props.style }}
         placeholder={this.props.placeholder}
         value={this.props.value}
         onChange={this.changeValue.bind(this)}
@@ -96,6 +96,7 @@ TextInput.propTypes = {
     'The height of the field. Can be a string containing any CSS unit, or a number of pixels. Default is 80px.'
   ),
   maxLength: PropTypes.number.describe('The maximum length of the input.'),
+  style: PropTypes.object.describe('Custom inline styles to apply to the input element.'),
 };
 
 export default withForwardedRef(TextInput);