Merge pull request #1281 from visualize-admin/feat/common-joinby-dime…

…nsion refactor: Common joinBy dimension
visualize-admin · Dec 4, 2023 · 9f88517 · 9f88517 · vercel · Dec 4, 2023
2 parents 7a4bec9 + df5db9d
commit 9f88517
Show file tree

Hide file tree

Showing 41 changed files with 518 additions and 158 deletions.
diff --git a/app/browse/datatable.tsx b/app/browse/datatable.tsx
@@ -267,6 +267,7 @@ export const DataSetTable = ({
         cubeFilters: chartConfig.cubes.map((cube) => ({
           iri: cube.iri,
           componentIris,
+          joinBy: cube.joinBy,
         })),
       },
     });

diff --git a/app/browser/dataset-preview.tsx b/app/browser/dataset-preview.tsx
@@ -92,7 +92,7 @@ export const DataSetPreview = ({
 }) => {
   const footnotesClasses = useFootnotesStyles({ useMarginTop: false });
   const locale = useLocale();
-  const filters = [{ iri: dataSetIri }];
+  const cubeFilters = [{ iri: dataSetIri }];
   const [
     { data: previewData, fetching: fetchingPreview, error: previewError },
   ] = useDataCubePreviewQuery({
@@ -114,7 +114,7 @@ export const DataSetPreview = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      cubeFilters: filters,
+      cubeFilters,
     },
   });
   const classes = useStyles({
@@ -197,7 +197,7 @@ export const DataSetPreview = ({
               <DataDownloadMenu
                 dataSource={dataSource}
                 title={dataCubeByIri.title}
-                filters={filters}
+                filters={cubeFilters}
               />
               {dataCubeByIri.observations.sparqlEditorUrl && (
                 <RunSparqlQuery

diff --git a/app/charts/area/chart-area.tsx b/app/charts/area/chart-area.tsx
@@ -55,6 +55,7 @@ export const ChartAreasVisualization = ({
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/charts/column/chart-column.tsx b/app/charts/column/chart-column.tsx
@@ -69,6 +69,7 @@ export const ChartColumnsVisualization = ({
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx
@@ -235,6 +235,8 @@ const useColumnsState = (
       return `${getYError(d)}${yErrorMeasure?.unit ?? ""}`;
     };
 
+    const y = getY(d);
+
     return {
       xAnchor,
       yAnchor,
@@ -246,7 +248,7 @@ const useColumnsState = (
       xValue: xTimeUnit ? timeFormatUnit(xLabel, xTimeUnit) : xLabel,
       datum: {
         label: undefined,
-        value: `${yValueFormatter(getY(d))}`,
+        value: y !== null && isNaN(y) ? "-" : `${yValueFormatter(getY(d))}`,
         error: getError(d),
         color: "",
       },

diff --git a/app/charts/column/columns.tsx b/app/charts/column/columns.tsx
@@ -96,7 +96,8 @@ export const Columns = () => {
     return chartData.map((d) => {
       const key = getRenderingKey(d);
       const xScaled = xScale(getX(d)) as number;
-      const y = getY(d) ?? NaN;
+      const yRaw = getY(d);
+      const y = yRaw === null || isNaN(yRaw) ? 0 : yRaw;
       const yScaled = yScale(y);
       const yRender = yScale(Math.max(y, 0));
       const height = Math.abs(yScaled - y0);

diff --git a/app/charts/combo/chart-combo-line-column.tsx b/app/charts/combo/chart-combo-line-column.tsx
@@ -51,6 +51,7 @@ export const ChartComboLineColumnVisualization = (
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/charts/combo/chart-combo-line-dual.tsx b/app/charts/combo/chart-combo-line-dual.tsx
@@ -51,6 +51,7 @@ export const ChartComboLineDualVisualization = (
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/charts/combo/chart-combo-line-single.tsx b/app/charts/combo/chart-combo-line-single.tsx
@@ -56,6 +56,7 @@ export const ChartComboLineSingleVisualization = (
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/charts/index.ts b/app/charts/index.ts
@@ -137,7 +137,7 @@ export const chartTypesOrder: { [k in ChartType]: number } = {
  * @param dimensions
  * @param preferredType
  */
-export const findPreferredDimension = (
+const findPreferredDimension = (
   dimensions: Component[],
   preferredType?: DimensionType
 ) => {
@@ -1885,9 +1885,11 @@ const adjustSegmentSorting = ({
 export const getPossibleChartTypes = ({
   dimensions,
   measures,
+  allowedChartTypes,
 }: {
   dimensions: Dimension[];
   measures: Measure[];
+  allowedChartTypes?: ChartType[];
 }): ChartType[] => {
   const numericalMeasures = measures.filter(isNumericalMeasure);
   const ordinalMeasures = measures.filter(isOrdinalMeasure);
@@ -1945,7 +1947,11 @@ export const getPossibleChartTypes = ({
   }
 
   return chartTypes
-    .filter((d) => possibles.includes(d))
+    .filter(
+      (d) =>
+        possibles.includes(d) &&
+        (!allowedChartTypes || allowedChartTypes.includes(d))
+    )
     .sort((a, b) => chartTypesOrder[a] - chartTypesOrder[b]);
 };
 

diff --git a/app/charts/line/chart-lines.tsx b/app/charts/line/chart-lines.tsx
@@ -56,6 +56,7 @@ export const ChartLinesVisualization = ({
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/charts/map/chart-map.tsx b/app/charts/map/chart-map.tsx
@@ -59,6 +59,7 @@ export const ChartMapVisualization = ({
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/charts/pie/chart-pie.tsx b/app/charts/pie/chart-pie.tsx
@@ -52,6 +52,7 @@ export const ChartPieVisualization = ({
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/charts/scatterplot/chart-scatterplot.tsx b/app/charts/scatterplot/chart-scatterplot.tsx
@@ -64,6 +64,7 @@ export const ChartScatterplotVisualization = ({
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/charts/shared/chart-data-filters.tsx b/app/charts/shared/chart-data-filters.tsx
@@ -18,7 +18,6 @@ import {
   DataSource,
   Filters,
   getFiltersByMappingStatus,
-  QueryFilters,
   useChartConfigFilters,
   useConfiguratorState,
 } from "@/configurator";
@@ -97,10 +96,9 @@ export const ChartDataFilters = (props: ChartDataFiltersProps) => {
       const cubeQueryFilters = queryFilters.find(
         (d) => d.iri === cube.iri
       ) as DataCubeObservationFilter;
-      const filtersByMappingStatus = getFiltersByMappingStatus(
-        chartConfig,
-        cube.iri
-      );
+      const filtersByMappingStatus = getFiltersByMappingStatus(chartConfig, {
+        cubeIri: cube.iri,
+      });
       const { unmappedFilters, mappedFilters } = filtersByMappingStatus;
       const unmappedKeys = Object.keys(unmappedFilters);
       const unmappedQueryFiltersArray = Object.entries(
@@ -214,7 +212,7 @@ type DataFilterProps = {
   dataSource: DataSource;
   chartConfig: ChartConfig;
   dataFilters: DataFilters;
-  interactiveFilters: QueryFilters;
+  interactiveFilters: Filters;
   disabled: boolean;
 };
 

diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx
@@ -32,6 +32,7 @@ import { parseDate } from "@/configurator/components/ui-helpers";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import { Component, Dimension, Measure, Observation } from "@/domain/data";
 import { truthy } from "@/domain/types";
+import { JOIN_BY_DIMENSION_IRI } from "@/graphql/hook-utils";
 import { DataCubeObservationFilter } from "@/graphql/resolver-types";
 import {
   InteractiveFiltersState,
@@ -93,12 +94,10 @@ export const useQueryFilters = ({
 
       return {
         iri: cube.iri,
-        componentIris:
-          dimensions.length > 0 && measures.length > 0
-            ? [...dimensions, ...measures]
-                .filter((d) => d.cubeIri === cube.iri)
-                .map((d) => d.iri)
-            : undefined,
+        // componentIris: getComponentIris(cube.iri, {
+        //   dimensions,
+        //   measures,
+        // }),
         filters: prepareQueryFilters(
           chartConfig.chartType,
           filters,
@@ -120,10 +119,48 @@ export const useQueryFilters = ({
   ]);
 };
 
+// Handle correctly when improving performance of data fetching!
+// const getComponentIris = (
+//   cubeIri: string,
+//   options: {
+//     dimensions: Dimension[];
+//     measures: Measure[];
+//   }
+// ) => {
+//   const { dimensions, measures } = options;
+
+//   if (dimensions.length === 0 && measures.length === 0) {
+//     return;
+//   }
+
+//   const filteredDimensionIris: string[] = [];
+
+//   for (const dimension of dimensions) {
+//     if (dimension.isJoinByDimension) {
+//       if (dimension.originalIris.some((d) => d.cubeIri === cubeIri)) {
+//         filteredDimensionIris.push(
+//           ...dimension.originalIris.map((d) => d.dimensionIri)
+//         );
+//       }
+//     } else {
+//       if (dimension.cubeIri === cubeIri) {
+//         filteredDimensionIris.push(dimension.iri);
+//       }
+//     }
+//   }
+
+//   return [
+//     ...filteredDimensionIris,
+//     ...measures.filter((d) => d.cubeIri === cubeIri).map((d) => d.iri),
+//   ];
+// };
+
 type IFKey = keyof NonNullable<InteractiveFiltersConfig>;
 
 export const getChartConfigFilterComponentIris = ({ cubes }: ChartConfig) => {
-  return Object.keys(getChartConfigFilters(cubes));
+  return Object.keys(getChartConfigFilters(cubes)).filter(
+    (d) => d !== JOIN_BY_DIMENSION_IRI
+  );
 };
 
 const getMapChartConfigAdditionalFields = ({ fields }: MapConfig) => {
@@ -212,12 +249,16 @@ export const extractChartConfigComponentIris = (chartConfig: ChartConfig) => {
     });
   }
 
-  return uniq(
-    [...fieldIris, ...additionalFieldIris, ...filterIris, ...IFIris].filter(
-      Boolean
+  return (
+    uniq(
+      [...fieldIris, ...additionalFieldIris, ...filterIris, ...IFIris].filter(
+        Boolean
+      )
     )
-    // Important so the order is consistent when querying.
-  ).sort();
+      .filter((d) => d !== JOIN_BY_DIMENSION_IRI)
+      // Important so the order is consistent when querying.
+      .sort()
+  );
 };
 
 /** Use to remove missing values from chart data. */

diff --git a/app/charts/table/chart-table.tsx b/app/charts/table/chart-table.tsx
@@ -40,6 +40,7 @@ export const ChartTableVisualization = ({
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/components/chart-filters-list.tsx b/app/components/chart-filters-list.tsx
@@ -43,13 +43,13 @@ export const ChartFiltersList = (props: ChartFiltersListProps) => {
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      cubeFilters: filters
-        ? filters.map((filter) => ({
-            iri: filter.iri,
-            componentIris: filter.componentIris,
-            filters: filter.filters,
-          }))
-        : [],
+      cubeFilters:
+        filters?.map((filter) => ({
+          iri: filter.iri,
+          componentIris: filter.componentIris,
+          filters: filter.filters,
+          joinBy: filter.joinBy,
+        })) ?? [],
     },
     pause: !filters,
   });

diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
@@ -82,6 +82,8 @@ export const ChartPreviewInner = (props: ChartPreviewProps) => {
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        filters: cube.filters,
+        joinBy: cube.joinBy,
       })),
     },
   });
@@ -93,8 +95,8 @@ export const ChartPreviewInner = (props: ChartPreviewProps) => {
   } = useChartTablePreview();
 
   const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
-  const dimensions = components?.dataCubesComponents.dimensions ?? [];
-  const measures = components?.dataCubesComponents.measures ?? [];
+  const dimensions = components?.dataCubesComponents.dimensions;
+  const measures = components?.dataCubesComponents.measures;
   const allComponents = useMemo(() => {
     if (!components?.dataCubesComponents) {
       return [];

diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
@@ -152,6 +152,7 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx
@@ -263,6 +263,8 @@ const PublishChartButton = () => {
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         componentIris,
+        filters: cube.filters,
+        joinBy: cube.joinBy,
       })),
     },
   });

diff --git a/app/components/chart-with-filters.tsx b/app/components/chart-with-filters.tsx
@@ -84,8 +84,8 @@ const GenericChart = (props: GenericChartProps) => {
     props;
   const queryFilters = useQueryFilters({
     chartConfig,
-    dimensions: dimensions ?? [],
-    measures: measures ?? [],
+    dimensions,
+    measures,
   });
   const commonProps = {
     dataSource,

diff --git a/app/config-types.ts b/app/config-types.ts
@@ -111,7 +111,6 @@ export type FilterValueMultiValues = FilterValueMulti["values"];
 const Filters = t.record(t.string, FilterValue, "Filters");
 
 export type Filters = t.TypeOf<typeof Filters>;
-export type QueryFilters = Filters | FilterValueSingle;
 
 // Meta
 const Title = t.type({