Merge branch 'main' of github.com:visualize-admin/visualization-tool …

…into feat/dashboards-1
visualize-admin · Sep 27, 2023 · 1b99589 · 1b99589
2 parents f747245 + e67e7fb
commit 1b99589
Show file tree

Hide file tree

Showing 26 changed files with 245 additions and 140 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,7 +9,26 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
-Nothing yet.
+- Fixes
+  - Cube checker now correctly checks if dimensions are present
+  - It's now possible to change the chart type for copied, non-hierarchical charts without having to open an options panel first
+  - Interactive filters are now aligned correctly (y axis)
+
+# [3.22.6] - 2023-09-19
+
+- Features
+  - Animated charts now show latest data as default
+- Fixes
+  - Table docs now work correctly again
+  - Cascading mode now works correctly for hierarchical dimensions used as interactive filters
+  - Changing the locale when previewing a larger cube no longer triggers multiple locale switches
+
+# [3.22.5] - 2023-09-12
+
+- Fixes
+  - It's now again possible to map all colors for hierarchical dimensions used as segmentation
+- Misc
+  - Improved `langString` error message
 
 # [3.22.4] - 2023-09-06
 

diff --git a/app/browse/datatable.tsx b/app/browse/datatable.tsx
@@ -216,7 +216,7 @@ export const DataSetPreviewTable = ({
   title: string;
   dimensions: DimensionMetadataFragment[];
   measures: DimensionMetadataFragment[];
-  observations: Observation[];
+  observations: Observation[] | undefined;
 }) => {
   const headers = useMemo(() => {
     return getSortedColumns([...dimensions, ...measures]);

diff --git a/app/browser/dataset-preview.tsx b/app/browser/dataset-preview.tsx
@@ -108,7 +108,13 @@ export const DataSetPreview = ({
     window.scrollTo({ top: 0 });
   }, []);
 
-  if (metadata?.dataCubeByIri) {
+  if (fetching) {
+    return (
+      <Flex className={classes.loadingWrapper}>
+        <Loading />
+      </Flex>
+    );
+  } else if (metadata?.dataCubeByIri) {
     const { dataCubeByIri } = metadata;
 
     return (
@@ -188,12 +194,6 @@ export const DataSetPreview = ({
         </Paper>
       </Flex>
     );
-  } else if (fetching) {
-    return (
-      <Flex className={classes.loadingWrapper}>
-        <Loading />
-      </Flex>
-    );
   } else {
     return (
       <Flex className={classes.loadingWrapper}>

diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
@@ -91,7 +91,14 @@ const useAreasState = (
     getSegmentAbbreviationOrLabel,
   } = variables;
   const getIdentityY = useGetIdentityY(yMeasure.iri);
-  const { chartData, scalesData, segmentData, timeRangeData, allData } = data;
+  const {
+    chartData,
+    scalesData,
+    segmentData,
+    timeRangeData,
+    paddingData,
+    allData,
+  } = data;
   const { fields, interactiveFiltersConfig } = chartConfig;
 
   const width = useWidth();
@@ -281,12 +288,12 @@ const useAreasState = (
     });
   }, [scalesData, normalize, getXAsString, getY]);
 
-  const allYScale = useMemo(() => {
+  const paddingYScale = useMemo(() => {
     //  When the user can toggle between absolute and relative values, we use the
     // absolute values to calculate the yScale domain, so that the yScale doesn't
     // change when the user toggles between absolute and relative values.
     if (interactiveFiltersConfig?.calculation.active) {
-      const scale = getStackedYScale(allData, {
+      const scale = getStackedYScale(paddingData, {
         normalize: false,
         getX: getXAsString,
         getY,
@@ -299,9 +306,13 @@ const useAreasState = (
       return scale;
     }
 
-    return getStackedYScale(allData, { normalize, getX: getXAsString, getY });
+    return getStackedYScale(paddingData, {
+      normalize,
+      getX: getXAsString,
+      getY,
+    });
   }, [
-    allData,
+    paddingData,
     getXAsString,
     getY,
     interactiveFiltersConfig?.calculation.active,
@@ -310,7 +321,7 @@ const useAreasState = (
 
   /** Dimensions */
   const { left, bottom } = useChartPadding({
-    allYScale,
+    yScale: paddingYScale,
     width,
     aspectRatio,
     interactiveFiltersConfig,

diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
@@ -448,7 +448,7 @@ const defaultSegmentOnChange: OnEncodingChange<
   );
   const colorMapping = mapValueIrisToColor({
     palette,
-    dimensionValues: selectedValues,
+    dimensionValues: component ? component.values : selectedValues,
   });
   const multiFilter = makeMultiFilter(selectedValues.map((d) => d.value));
 

diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
@@ -90,7 +90,14 @@ const useColumnsGroupedState = (
     getSegment,
     getSegmentAbbreviationOrLabel,
   } = variables;
-  const { chartData, scalesData, segmentData, timeRangeData, allData } = data;
+  const {
+    chartData,
+    scalesData,
+    segmentData,
+    timeRangeData,
+    paddingData,
+    allData,
+  } = data;
   const { fields, interactiveFiltersConfig } = chartConfig;
 
   const width = useWidth();
@@ -170,7 +177,7 @@ const useColumnsGroupedState = (
     xTimeRangeDomainLabels,
     colors,
     yScale,
-    allYScale,
+    paddingYScale,
     interactiveXTimeRangeScale,
     xScale,
     xScaleIn,
@@ -247,22 +254,26 @@ const useColumnsGroupedState = (
     );
     const yScale = scaleLinear().domain([minValue, maxValue]).nice();
 
-    const allMinValue = Math.min(
-      min(allData, (d) => (getYErrorRange ? getYErrorRange(d)[0] : getY(d))) ??
-        0,
+    const minPaddingValue = Math.min(
+      min(paddingData, (d) =>
+        getYErrorRange ? getYErrorRange(d)[0] : getY(d)
+      ) ?? 0,
       0
     );
-    const allMaxValue = Math.max(
-      max(allData, (d) => (getYErrorRange ? getYErrorRange(d)[1] : getY(d))) ??
-        0,
+    const maxPaddingValue = Math.max(
+      max(paddingData, (d) =>
+        getYErrorRange ? getYErrorRange(d)[1] : getY(d)
+      ) ?? 0,
       0
     );
-    const allYScale = scaleLinear().domain([allMinValue, allMaxValue]).nice();
+    const paddingYScale = scaleLinear()
+      .domain([minPaddingValue, maxPaddingValue])
+      .nice();
 
     return {
       colors,
       yScale,
-      allYScale,
+      paddingYScale,
       interactiveXTimeRangeScale,
       xScale,
       xScaleIn,
@@ -282,7 +293,7 @@ const useColumnsGroupedState = (
     getXLabel,
     segments,
     timeRangeData,
-    allData,
+    paddingData,
     allSegments,
     segmentsByAbbreviationOrLabel,
     segmentsByValue,
@@ -320,7 +331,7 @@ const useColumnsGroupedState = (
   }, [getSegment, getX, chartData, segmentSortingOrder, segments, xScale]);
 
   const { left, bottom } = useChartPadding({
-    allYScale,
+    yScale: paddingYScale,
     width,
     aspectRatio,
     interactiveFiltersConfig,

diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
@@ -99,7 +99,14 @@ const useColumnsStackedState = (
     getSegmentAbbreviationOrLabel,
   } = variables;
   const getIdentityY = useGetIdentityY(yMeasure.iri);
-  const { chartData, scalesData, segmentData, timeRangeData, allData } = data;
+  const {
+    chartData,
+    scalesData,
+    segmentData,
+    timeRangeData,
+    paddingData,
+    allData,
+  } = data;
   const { fields, interactiveFiltersConfig } = chartConfig;
 
   const width = useWidth();
@@ -312,12 +319,12 @@ const useColumnsStackedState = (
     });
   }, [scalesData, normalize, getX, getY, getAnimation]);
 
-  const allYScale = useMemo(() => {
+  const paddingYScale = useMemo(() => {
     //  When the user can toggle between absolute and relative values, we use the
     // absolute values to calculate the yScale domain, so that the yScale doesn't
     // change when the user toggles between absolute and relative values.
     if (interactiveFiltersConfig?.calculation.active) {
-      const scale = getStackedYScale(allData, {
+      const scale = getStackedYScale(paddingData, {
         normalize: false,
         getX,
         getY,
@@ -331,15 +338,15 @@ const useColumnsStackedState = (
       return scale;
     }
 
-    return getStackedYScale(allData, {
+    return getStackedYScale(paddingData, {
       normalize,
       getX,
       getY,
       getTime: getAnimation,
     });
   }, [
     interactiveFiltersConfig?.calculation.active,
-    allData,
+    paddingData,
     normalize,
     getX,
     getY,
@@ -373,7 +380,7 @@ const useColumnsStackedState = (
 
   /** Chart dimensions */
   const { left, bottom } = useChartPadding({
-    allYScale,
+    yScale: paddingYScale,
     width,
     aspectRatio,
     interactiveFiltersConfig,

diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx
@@ -78,7 +78,7 @@ const useColumnsState = (
     getYError,
     getYErrorRange,
   } = variables;
-  const { chartData, scalesData, timeRangeData, allData } = data;
+  const { chartData, scalesData, timeRangeData, paddingData, allData } = data;
   const { fields, interactiveFiltersConfig } = chartConfig;
 
   const width = useWidth();
@@ -99,7 +99,7 @@ const useColumnsState = (
   const {
     xScale,
     yScale,
-    allYScale,
+    paddingYScale,
     interactiveXTimeRangeScale,
     xScaleInteraction,
     xTimeRangeDomainLabels,
@@ -151,22 +151,26 @@ const useColumnsState = (
     );
     const yScale = scaleLinear().domain([minValue, maxValue]).nice();
 
-    const allMinValue = Math.min(
-      min(allData, (d) => (getYErrorRange ? getYErrorRange(d)[0] : getY(d))) ??
-        0,
+    const paddingMinValue = Math.min(
+      min(paddingData, (d) =>
+        getYErrorRange ? getYErrorRange(d)[0] : getY(d)
+      ) ?? 0,
       0
     );
-    const allMaxValue = Math.max(
-      max(allData, (d) => (getYErrorRange ? getYErrorRange(d)[1] : getY(d))) ??
-        0,
+    const paddingMaxValue = Math.max(
+      max(paddingData, (d) =>
+        getYErrorRange ? getYErrorRange(d)[1] : getY(d)
+      ) ?? 0,
       0
     );
-    const allYScale = scaleLinear().domain([allMinValue, allMaxValue]).nice();
+    const paddingYScale = scaleLinear()
+      .domain([paddingMinValue, paddingMaxValue])
+      .nice();
 
     return {
       xScale,
       yScale,
-      allYScale,
+      paddingYScale,
       interactiveXTimeRangeScale,
       xScaleInteraction,
       xTimeRangeDomainLabels,
@@ -178,7 +182,7 @@ const useColumnsState = (
     getY,
     getYErrorRange,
     scalesData,
-    allData,
+    paddingData,
     timeRangeData,
     fields.x.sorting,
     fields.x.useAbbreviations,
@@ -188,7 +192,7 @@ const useColumnsState = (
   ]);
 
   const { left, bottom } = useChartPadding({
-    allYScale,
+    yScale: paddingYScale,
     width,
     aspectRatio,
     interactiveFiltersConfig,

diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx
@@ -81,7 +81,14 @@ const useLinesState = (
     getSegment,
     getSegmentAbbreviationOrLabel,
   } = variables;
-  const { chartData, scalesData, segmentData, timeRangeData, allData } = data;
+  const {
+    chartData,
+    scalesData,
+    segmentData,
+    timeRangeData,
+    paddingData,
+    allData,
+  } = data;
   const { fields, interactiveFiltersConfig } = chartConfig;
 
   const width = useWidth();
@@ -132,10 +139,11 @@ const useLinesState = (
   const yDomain = [minValue, maxValue];
   const yScale = scaleLinear().domain(yDomain).nice();
 
-  const allMinValue = Math.min(min(allData, getY) ?? 0, 0);
-  const allMaxValue = max(allData, getY) ?? 0;
-  const allYDomain = [allMinValue, allMaxValue];
-  const allYScale = scaleLinear().domain(allYDomain).nice();
+  const paddingMinValue = Math.min(min(paddingData, getY) ?? 0, 0);
+  const paddingMaxValue = max(paddingData, getY) ?? 0;
+  const paddingYScale = scaleLinear()
+    .domain([paddingMinValue, paddingMaxValue])
+    .nice();
 
   // segments
   const segmentFilter = segmentDimension?.iri
@@ -195,7 +203,7 @@ const useLinesState = (
 
   // Dimensions
   const { left, bottom } = useChartPadding({
-    allYScale,
+    yScale: paddingYScale,
     width,
     aspectRatio,
     interactiveFiltersConfig,