Merge branch 'main' into feat/remove-beta-tag

Author: noahonyejese

CHANGELOG.md

@@ -14,13 +14,21 @@ You can also check the
 - Features
   - Allowed previewing of charts in states different than CONFIGURING_CHART
     (iframe `/preview` page)
+  - Improved some wording and added an explanation to the `Concepts` navigation
+    menu
+  - Filters and components are now grouped in the left panel and dropdowns in
+    case of working with merged cubes
+  - Improved default chart selection when adding a new cube (by default the
+    application will try to use dual-line chart with measures from different
+    cubes)
 - Fixes
   - Introduced a `componentId` concept which makes the dimensions and measures
     unique by adding an unversioned cube iri to the unversioned component iri on
     the server-side. With this we correctly handle multiple dimensions with the
     same iri that come from different cubes (when merging cubes)
   - Map legend is now correctly updated (in some cases it was rendered
     incorrectly on the initial render)
+  - Vertical Axis measure names are now correctly displayed in the left panel
 - Performance
   - We no longer load non-key dimensions when initializing a chart
 - Maintenance
@@ -40,6 +48,8 @@ You can also check the
   - Improved chart tooltips on small screens
   - % mode toggle no longer overlaps with the Y axis title
   - Merging of cubes beta tag has been removed
+  - Dual line Chart Tooltip indicators are now fixed for smaller screens
+
 
 # [4.9.4] - 2024-11-06
 

app/browser/dataset-browse.tsx

@@ -31,6 +31,7 @@ import {
   SearchFieldProps,
 } from "@/components/form";
 import { Loading, LoadingDataError } from "@/components/hint";
+import { InfoIconTooltip } from "@/components/info-icon-tooltip";
 import MaybeLink from "@/components/maybe-link";
 import { MaybeTooltip } from "@/components/maybe-tooltip";
 import {
@@ -584,7 +585,6 @@ const NavSectionTitle = ({
       sx={{
         alignItems: "center",
         p: 3,
-        cursor: "pointer",
         backgroundColor: theme.backgroundColor,
         borderRadius: 2,
         height: "2.5rem",
@@ -626,6 +626,7 @@ const NavSection = ({
     );
   }, [counts, items]);
   const { isOpen, open, close } = useDisclosure(!!currentFilter);
+
   return (
     <div>
       <NavSectionTitle theme={theme} sx={{ mb: "block" }}>
@@ -882,7 +883,21 @@ export const SearchFilters = ({
         counts={counts}
         filters={filters}
         icon={<SvgIcOrganisations width={20} height={20} />}
-        label={<Trans id="browse-panel.termsets">Concepts</Trans>}
+        label={
+          <Stack direction="row" gap={2} alignItems="center">
+            <Trans id="browse-panel.termsets">Concepts</Trans>
+            <InfoIconTooltip
+              variant="secondary"
+              placement="right"
+              title={
+                <Trans id="browse-panel.termsets.explanation">
+                  Concepts represent values that can be shared across different
+                  dimensions and datasets.
+                </Trans>
+              }
+            />
+          </Stack>
+        }
         extra={null}
         disableLinks={disableNavLinks}
       />
@@ -1206,8 +1221,8 @@ export const DatasetResult = ({
                         dimension.termsets.length > 0 ? (
                           <>
                             <Typography variant="body2">
-                              <Trans id="dataset-result.dimension-termset-contains">
-                                Contains values from
+                              <Trans id="dataset-result.dimension-joined-by">
+                                Joined by
                               </Trans>
                               <Stack gap={1} flexDirection="row" mt={1}>
                                 {dimension.termsets.map((termset) => {

app/charts/combo/chart-combo-line-dual.tsx

@@ -29,22 +29,22 @@ const ChartComboLineDual = memo((props: ChartProps<ComboLineDualConfig>) => {
   const { chartConfig } = props;
   const { interactiveFiltersConfig } = chartConfig;
   const [{ dashboardFilters }] = useConfiguratorState(hasChartConfigs);
-  
+
   return (
     <ComboLineDualChart {...props}>
       <ChartContainer>
         <ChartSvg>
           <ComboLineContainer>
-              <AxisHeightLinearDual orientation="left" />
-              <AxisHeightLinearDual orientation="right" /> 
-              <AxisTime />
-              <AxisTimeDomain />
-              <ComboLineDual />
-              <InteractionHorizontal />
-              {shouldShowBrush(
-                interactiveFiltersConfig,
-                dashboardFilters?.timeRange
-              ) && <BrushTime />}
+            <AxisHeightLinearDual orientation="left" />
+            <AxisHeightLinearDual orientation="right" />
+            <AxisTime />
+            <AxisTimeDomain />
+            <ComboLineDual />
+            <InteractionHorizontal />
+            {shouldShowBrush(
+              interactiveFiltersConfig,
+              dashboardFilters?.timeRange
+            ) && <BrushTime />}
           </ComboLineContainer>
         </ChartSvg>
         <HoverDotMultiple />

app/charts/combo/combo-line-container.tsx

@@ -1,31 +1,33 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
-import { getTextWidth } from '@/utils/get-text-width';
+import { getTextWidth } from "@/utils/get-text-width";
 
-import { TICK_PADDING } from '../shared/axis-height-linear';
-import { useChartState } from '../shared/chart-state';
-import { useChartTheme } from '../shared/use-chart-theme';
+import { TICK_PADDING } from "../shared/axis-height-linear";
+import { useChartState } from "../shared/chart-state";
+import { useChartTheme } from "../shared/use-chart-theme";
 
-import { ComboLineColumnState } from './combo-line-column-state';
-import { ComboLineDualState } from './combo-line-dual-state';
+import { ComboLineColumnState } from "./combo-line-column-state";
+import { ComboLineDualState } from "./combo-line-dual-state";
 
 export const TITLE_VPADDING = 4;
 
 export const ComboLineContainer = ({ children }: { children: ReactNode }) => {
-    const { axisLabelFontSize } = useChartTheme();
-    const { y, bounds } = useChartState() as ComboLineDualState | ComboLineColumnState;
+  const { axisLabelFontSize } = useChartTheme();
+  const { y, bounds } = useChartState() as
+    | ComboLineDualState
+    | ComboLineColumnState;
   const axisTitle = y.left.label;
   const axisTitleWidth =
     getTextWidth(axisTitle, { fontSize: axisLabelFontSize }) + TICK_PADDING;
   const otherAxisTitle = y.right.label;
-  const otherAxisTitleWidth = getTextWidth(otherAxisTitle, { fontSize: axisLabelFontSize }) + TICK_PADDING;
-  const overLappingTitles = axisTitleWidth + otherAxisTitleWidth > bounds.chartWidth;
-
-
-  return (
-    <g transform={`translate(0, ${overLappingTitles ? (axisLabelFontSize + TITLE_VPADDING) * 2 : 0})`}>
-        {children}
-    </g>
-
-  )
-}
+  const otherAxisTitleWidth =
+    getTextWidth(otherAxisTitle, { fontSize: axisLabelFontSize }) +
+    TICK_PADDING;
+  const overLappingTitles =
+    axisTitleWidth + otherAxisTitleWidth > bounds.chartWidth;
+
+  const yAdjustment = overLappingTitles
+    ? (axisLabelFontSize + TITLE_VPADDING) * 2
+    : 0;
+  return <g transform={`translate(0, ${yAdjustment})`}>{children}</g>;
+};

app/charts/combo/combo-line-dual-state.tsx

@@ -152,13 +152,19 @@ const useComboLineDualState = (
   const topMarginAxisTitleAdjustment = 50 + axisTitleAdjustment;
 
   const right = Math.max(maxRightTickWidth, 40);
+
   const margins = getMargins({
     left,
     right,
     bottom,
     top: topMarginAxisTitleAdjustment,
   });
-  const bounds = useChartBounds(width, margins, height);
+  
+  const bounds = useChartBounds(width, margins, height, {
+    leftLabel: variables.y.left.label,
+    rightLabel: variables.y.right.label,
+  });
+        
   const { chartWidth, chartHeight } = bounds;
   const xScales = [xScale, xScaleTimeRange];
   const yScales = [yScale, yScaleLeft, yScaleRight];

app/charts/index.spec.ts

@@ -1,4 +1,9 @@
-import { ColumnConfig, ScatterPlotConfig, TableFields } from "@/configurator";
+import {
+  ColumnConfig,
+  ComboLineDualConfig,
+  ScatterPlotConfig,
+  TableFields,
+} from "@/configurator";
 import { Dimension, Measure } from "@/domain/data";
 import { stringifyComponentId } from "@/graphql/make-component-id";
 import { TimeUnit } from "@/graphql/resolver-types";
@@ -436,4 +441,62 @@ describe("chart type switch", () => {
       oldChartConfig.fields.x.componentId
     );
   });
+
+  it("should prefer to use components from different cubes if merging cubes, otherwise not", () => {
+    const oldChartConfig = {
+      chartType: "column",
+      cubes: [{ iri: "A" }],
+      fields: {
+        x: {
+          componentId: "A_D1",
+        },
+        y: {
+          componentId: "A_M1",
+        },
+      },
+    } as any as ColumnConfig;
+    const dimensions = [
+      { id: "A_D1", cubeIri: "A" },
+      { __typename: "TemporalDimension", id: "B_D1", cubeIri: "B" },
+    ] as any as Dimension[];
+    const measures = [
+      { __typename: "NumericalMeasure", id: "A_M1", cubeIri: "A", unit: "X" },
+      { __typename: "NumericalMeasure", id: "A_M2", cubeIri: "A", unit: "Y" },
+      { __typename: "NumericalMeasure", id: "B_M1", cubeIri: "B", unit: "Z" },
+    ] as any as Measure[];
+
+    const newChartConfigMergingOfCubes = getChartConfigAdjustedToChartType({
+      chartConfig: oldChartConfig,
+      newChartType: "comboLineDual",
+      dimensions,
+      measures,
+      isAddingNewCube: true,
+    }) as ComboLineDualConfig;
+
+    expect(
+      newChartConfigMergingOfCubes.fields.y.rightAxisComponentId.startsWith("A")
+    ).toEqual(true);
+    expect(
+      newChartConfigMergingOfCubes.fields.y.leftAxisComponentId.startsWith("B")
+    ).toEqual(true);
+
+    const newChartConfigNotMergingOfCubes = getChartConfigAdjustedToChartType({
+      chartConfig: oldChartConfig,
+      newChartType: "comboLineDual",
+      dimensions,
+      measures,
+      isAddingNewCube: false,
+    }) as ComboLineDualConfig;
+
+    expect(
+      newChartConfigNotMergingOfCubes.fields.y.rightAxisComponentId.startsWith(
+        "A"
+      )
+    ).toEqual(true);
+    expect(
+      newChartConfigNotMergingOfCubes.fields.y.leftAxisComponentId.startsWith(
+        "A"
+      )
+    ).toEqual(true);
+  });
 });