Merge pull request #1288 from visualize-admin/feat/segment-by-tempora…

…l-dimensions feat: Temporal segmentations
visualize-admin · Dec 8, 2023 · 78582b7 · 78582b7 · vercel · Dec 8, 2023
2 parents 7e28592 + f6071d7
commit 78582b7
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 - Features
   - Localized cube landing pages are now supported (dcat:landingPage) 🌎
+  - Temporal dimensions can now be used as segmentation fields (excluding area and line charts)
 - Fixes
   - Copying a link to a new visualization from a dataset preview now correctly includes a data source
 

diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
@@ -302,6 +302,7 @@ interface ChartSpecs {
 const SEGMENT_COMPONENT_TYPES: ComponentType[] = [
   "NominalDimension",
   "OrdinalDimension",
+  "TemporalDimension",
   "TemporalOrdinalDimension",
   "GeoCoordinatesDimension",
   "GeoShapesDimension",

diff --git a/app/charts/index.ts b/app/charts/index.ts
@@ -999,17 +999,23 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
           }
         } else {
           const oldSegment = oldValue as Exclude<typeof oldValue, TableFields>;
-          newSegment = {
-            componentIri: oldSegment.componentIri,
-            palette: oldSegment.palette,
-            colorMapping: oldSegment.colorMapping,
-            sorting:
-              "sorting" in oldSegment &&
-              oldSegment.sorting &&
-              "sortingOrder" in oldSegment.sorting
-                ? oldSegment.sorting ?? DEFAULT_FIXED_COLOR_FIELD
-                : DEFAULT_SORTING,
-          };
+          const segmentDimension = dimensions.find(
+            (d) => d.iri === oldValue.componentIri
+          );
+
+          if (!isTemporalDimension(segmentDimension)) {
+            newSegment = {
+              componentIri: oldSegment.componentIri,
+              palette: oldSegment.palette,
+              colorMapping: oldSegment.colorMapping,
+              sorting:
+                "sorting" in oldSegment &&
+                oldSegment.sorting &&
+                "sortingOrder" in oldSegment.sorting
+                  ? oldSegment.sorting ?? DEFAULT_FIXED_COLOR_FIELD
+                  : DEFAULT_SORTING,
+            };
+          }
         }
 
         return produce(newChartConfig, (draft) => {
@@ -1084,16 +1090,22 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
           }
         } else {
           const oldSegment = oldValue as Exclude<typeof oldValue, TableFields>;
-          newSegment = {
-            componentIri: oldSegment.componentIri,
-            palette: oldSegment.palette,
-            colorMapping: oldSegment.colorMapping,
-            sorting: adjustSegmentSorting({
-              segment: oldSegment,
-              acceptedValues: AREA_SEGMENT_SORTING.map((d) => d.sortingType),
-              defaultValue: "byTotalSize",
-            }),
-          };
+          const segmentDimension = dimensions.find(
+            (d) => d.iri === oldValue.componentIri
+          );
+
+          if (!isTemporalDimension(segmentDimension)) {
+            newSegment = {
+              componentIri: oldSegment.componentIri,
+              palette: oldSegment.palette,
+              colorMapping: oldSegment.colorMapping,
+              sorting: adjustSegmentSorting({
+                segment: oldSegment,
+                acceptedValues: AREA_SEGMENT_SORTING.map((d) => d.sortingType),
+                defaultValue: "byTotalSize",
+              }),
+            };
+          }
         }
 
         return produce(newChartConfig, (draft) => {

diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx
@@ -1193,7 +1193,8 @@ const ChartFieldMultiFilter = ({
         <legend style={{ display: "none" }}>
           <Trans id="controls.section.filter">Filter</Trans>
         </legend>
-        {isTemporalDimension(component) ? (
+        {/* For temporal-based segments, we want to treat values as nominal. */}
+        {isTemporalDimension(component) && field !== "segment" ? (
           <TimeFilter
             dimension={component}
             disableInteractiveFilters={encoding.disableInteractiveFilters}