Gauge: remove global range, support negative numbers

frontend/src/metabase/visualizations/components/settings/ChartSettingGaugeSegments.jsx

@@ -42,10 +42,14 @@ const ChartSettingGaugeSegments = ({ value: segments, onChange }) => {
                 <input
                   type="number"
                   className="input full"
-                  value={segment.min}
-                  onChange={e =>
-                    onChangeProperty(index, "min", parseFloat(e.target.value))
-                  }
+                  // NOTE: uncontrolled input to support partially input negative numbers
+                  defaultValue={segment.min}
+                  onChange={e => {
+                    const value = parseFloat(e.target.value);
+                    if (!isNaN(value)) {
+                      onChangeProperty(index, "min", value);
+                    }
+                  }}
                   placeholder={t`Min`}
                 />
               </td>
@@ -53,10 +57,14 @@ const ChartSettingGaugeSegments = ({ value: segments, onChange }) => {
                 <input
                   type="number"
                   className="input full"
-                  value={segment.max}
-                  onChange={e =>
-                    onChangeProperty(index, "max", parseFloat(e.target.value))
-                  }
+                  // NOTE: uncontrolled input to support partially input negative numbers
+                  defaultValue={segment.max}
+                  onChange={e => {
+                    const value = parseFloat(e.target.value);
+                    if (!isNaN(value)) {
+                      onChangeProperty(index, "max", value);
+                    }
+                  }}
                   placeholder={t`Max`}
                 />
               </td>
@@ -101,10 +109,11 @@ const ChartSettingGaugeSegments = ({ value: segments, onChange }) => {
 
 function getColorPalette() {
   return [
-    colors.error,
-    colors.warning,
-    colors.success,
+    colors["error"],
+    colors["warning"],
+    colors["success"],
     ...Object.values(normal).slice(0, 9),
+    colors["bg-medium"],
   ];
 }
 

frontend/src/metabase/visualizations/visualizations/Gauge.jsx

@@ -11,7 +11,6 @@ import { formatValue } from "metabase/lib/formatting";
 import { isNumeric } from "metabase/lib/schema_metadata";
 
 import ChartSettingGaugeSegments from "metabase/visualizations/components/settings/ChartSettingGaugeSegments";
-import ChartSettingRange from "metabase/visualizations/components/settings/ChartSettingRange";
 
 import type { VisualizationProps } from "metabase/meta/types/Visualization";
 
@@ -79,8 +78,7 @@ export default class Gauge extends Component {
 
   static settings = {
     "gauge.range": {
-      section: "Display",
-      title: t`Gauge range`,
+      // currently not exposed in settings, just computed from gauge.segments
       getDefault(series, vizSettings) {
         const segments = vizSettings["gauge.segments"].filter(segmentIsValid);
         const values = [
@@ -92,11 +90,10 @@ export default class Gauge extends Component {
           : [0, 1];
       },
       readDependencies: ["gauge.segments"],
-      widget: ChartSettingRange,
     },
     "gauge.segments": {
       section: "Display",
-      title: t`Colored ranges`,
+      title: t`Gauge ranges`,
       getDefault(series) {
         let value = 100;
         try {