feat: Update possible table column styles

...bar & heatmap only for numerical measures, categories for other dimensions
visualize-admin · Oct 27, 2022 · dac178e · dac178e
1 parent 295b00f
commit dac178e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 33 deletions.
diff --git a/app/charts/table/table-state.tsx b/app/charts/table/table-state.tsx
@@ -34,7 +34,6 @@ import {
 } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
 import { useFormatNumber, useDimensionFormatters } from "@/formatters";
-import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { getColorInterpolator } from "@/palettes";
 import { useTheme } from "@/themes";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
@@ -281,9 +280,7 @@ const useTableState = ({
           return common as TextColumnMeta;
         } else if (columnStyleType === "category") {
           const { colorMapping } = columnStyle as ColumnStyleCategory;
-          const dimension = dimensions.find(
-            (d) => d.iri === iri
-          ) as DimensionMetadataFragment;
+          const dimension = allColumnsByIri[iri];
 
           // Color scale (always from colorMappings)
           const colorScale = scaleOrdinal<string>();

diff --git a/app/configurator/table/table-chart-options.tsx b/app/configurator/table/table-chart-options.tsx
@@ -38,7 +38,7 @@ import {
   updateIsGroup,
   updateIsHidden,
 } from "@/configurator/table/table-config-state";
-import { canDimensionBeMultiFiltered } from "@/domain/data";
+import { canDimensionBeMultiFiltered, isNumericalMeasure } from "@/domain/data";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { DataCubeMetadata } from "@/graphql/types";
 import {
@@ -170,34 +170,31 @@ export const TableColumnOptions = ({
 
   const { isGroup, isHidden } = chartConfig.fields[activeField];
 
-  const columnStyleOptions =
-    component.__typename === "NominalDimension" ||
-    component.__typename === "OrdinalDimension" ||
-    component.__typename === "TemporalDimension"
-      ? [
-          {
-            value: "text",
-            label: t({ id: "columnStyle.text", message: `Text` }),
-          },
-          {
-            value: "category",
-            label: t({ id: "columnStyle.categories", message: `Categories` }),
-          },
-        ]
-      : [
-          {
-            value: "text",
-            label: t({ id: "columnStyle.text", message: `Text` }),
-          },
-          {
-            value: "heatmap",
-            label: t({ id: "columnStyle.heatmap", message: `Heat Map` }),
-          },
-          {
-            value: "bar",
-            label: t({ id: "columnStyle.bar", message: `Bar Chart` }),
-          },
-        ];
+  const columnStyleOptions = isNumericalMeasure(component)
+    ? [
+        {
+          value: "text",
+          label: t({ id: "columnStyle.text", message: `Text` }),
+        },
+        {
+          value: "heatmap",
+          label: t({ id: "columnStyle.heatmap", message: `Heat Map` }),
+        },
+        {
+          value: "bar",
+          label: t({ id: "columnStyle.bar", message: `Bar Chart` }),
+        },
+      ]
+    : [
+        {
+          value: "text",
+          label: t({ id: "columnStyle.text", message: `Text` }),
+        },
+        {
+          value: "category",
+          label: t({ id: "columnStyle.categories", message: `Categories` }),
+        },
+      ];
   return (
     <div
       key={`control-panel-table-column-${activeField}`}