Merge pull request #402 from commonknowledge/feat/inspector-config-bar-color

feat: remove unused inspector config components; restore inspector bar color select

Author: joaquimds

src/app/(private)/(dashboards)/superadmin/data-sources/[id]/components/InspectorConfigSection.tsx

@@ -13,7 +13,11 @@ import { GripVertical, LayoutGrid, LayoutList } from "lucide-react";
 import { useCallback, useMemo } from "react";
 import { v4 as uuidv4 } from "uuid";
 import ColumnMetadataIcons from "@/app/(private)/map/[id]/components/ColumnMetadataIcons";
-import { INSPECTOR_COLOR_OPTIONS } from "@/app/(private)/map/[id]/components/InspectorPanel/inspectorPanelOptions";
+import {
+  DEFAULT_BAR_COLOR_VALUE,
+  INSPECTOR_BAR_COLOR_OPTIONS,
+  INSPECTOR_COLOR_OPTIONS,
+} from "@/app/(private)/map/[id]/components/InspectorPanel/inspectorPanelOptions";
 import { useDataSourceColumn } from "@/app/(private)/map/[id]/hooks/useDataSourceColumn";
 import { useInspectorColumn } from "@/app/(private)/map/[id]/hooks/useInspectorColumn";
 import { NULL_UUID } from "@/constants";
@@ -580,6 +584,26 @@ function ColumnItemRow({
             </select>
           )}
 
+        {inspectorColumn &&
+          (inspectorColumn.displayFormat === ColumnDisplayFormat.Percentage ||
+            inspectorColumn.displayFormat === ColumnDisplayFormat.Scale) && (
+            <select
+              className="h-6 rounded border border-input bg-background px-1.5 text-xs"
+              value={inspectorColumn?.barColor ?? DEFAULT_BAR_COLOR_VALUE}
+              onChange={(e) =>
+                onUpdate({
+                  barColor: e.target.value,
+                })
+              }
+            >
+              {INSPECTOR_BAR_COLOR_OPTIONS.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
+            </select>
+          )}
+
         {inspectorColumn?.displayFormat === ColumnDisplayFormat.Scale && (
           <input
             type="number"

src/app/(private)/map/[id]/components/InspectorPanel/DataRecordColumns.tsx

@@ -8,6 +8,7 @@ import { formatNumber } from "@/utils/text";
 import { PARTY_COLORS } from "../../constants";
 import { useDataSourceColumn } from "../../hooks/useDataSourceColumn";
 import { useInspectorColumn } from "../../hooks/useInspectorColumn";
+import { useInspectorDataSourceConfig } from "../../hooks/useInspectorDataSourceConfig";
 import { getDisplayValue, parseColumnNumber } from "../../utils/stats";
 import { getBarColorForLabel } from "./inspectorPanelOptions";
 import { PropertyLabel } from "./PropertyLabel";
@@ -61,6 +62,7 @@ interface SubRendererProps {
   dataSourceId: string | undefined;
   columnMetadata?: ColumnMetadata | undefined;
   columnType?: ColumnType | null;
+  inspectorColor?: string | null;
 }
 
 function TextOrNumberValue({
@@ -189,17 +191,19 @@ function PercentageBarValue({
   value,
   inspectorColumn,
   columnMetadata,
+  inspectorColor,
 }: Omit<SubRendererProps, "dataSourceId" | "columnType">) {
   const num = parseColumnNumber(value, {
     isCount: false,
     columnMetadata,
   });
   const fill = barFill(
-    getBarColorForLabel(
-      inspectorColumn.name,
-      columnMetadata?.displayName,
-      inspectorColumn.barColor,
-    ),
+    getBarColorForLabel({
+      columnName: inspectorColumn.name,
+      displayName: columnMetadata?.displayName,
+      barColor: inspectorColumn.barColor,
+      inspectorColor,
+    }),
   );
 
   if (num === null) {
@@ -229,17 +233,19 @@ function ScaleValue({
   value,
   inspectorColumn,
   columnMetadata,
+  inspectorColor,
 }: Omit<SubRendererProps, "dataSourceId" | "columnType">) {
   const num = parseColumnNumber(value, {
     isCount: false,
     columnMetadata,
   });
   const fill = barFill(
-    getBarColorForLabel(
-      inspectorColumn.name,
-      columnMetadata?.displayName,
-      inspectorColumn.barColor,
-    ),
+    getBarColorForLabel({
+      columnName: inspectorColumn.name,
+      displayName: columnMetadata?.displayName,
+      barColor: inspectorColumn.barColor,
+      inspectorColor,
+    }),
   );
 
   if (num === null) {
@@ -275,6 +281,7 @@ function DataRecordPropertyValue({
 }) {
   const { columnMetadata, columnDef } = useDataSourceColumn(dataSourceId, name);
   const inspectorColumn = useInspectorColumn(dataSourceId, name);
+  const inspectorConfig = useInspectorDataSourceConfig(dataSourceId);
 
   const format = inspectorColumn?.displayFormat;
 
@@ -310,6 +317,7 @@ function DataRecordPropertyValue({
         value={value}
         inspectorColumn={inspectorColumn}
         columnMetadata={columnMetadata}
+        inspectorColor={inspectorConfig?.color}
       />
     );
   }
@@ -320,6 +328,7 @@ function DataRecordPropertyValue({
         value={value}
         inspectorColumn={inspectorColumn}
         columnMetadata={columnMetadata}
+        inspectorColor={inspectorConfig?.color}
       />
     );
   }