Merge pull request #2289 from visualize-admin/feat/smaller-improvements-2

feat: Smaller improvements

Author: bprusinowski

CHANGELOG.md

@@ -18,6 +18,10 @@ You can also check the
   - Fixes on
     - Nested layers appear on the map
     - Attributions are no longer coming from all layers of the endpoint
+- Other features
+  - Value labels in bar and column charts are now centered both horizontally and
+    vertically
+  - ODS iframe dataset preview now uses official ODS color for new chart button
 
 # 5.7.4 - 2025-04-29
 

app/browser/select-dataset-step.tsx

@@ -1,6 +1,6 @@
 import { ContentWrapper } from "@interactivethings/swiss-federal-ci/dist/components";
 import { Trans } from "@lingui/macro";
-import { Box, Button, Theme, Typography } from "@mui/material";
+import { Box, Button, darken, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { AnimatePresence } from "framer-motion";
 import sortBy from "lodash/sortBy";
@@ -472,6 +472,19 @@ const SelectDatasetStepContent = ({
                             <Icon name="arrowRight" size={20} />
                           )
                         }
+                        sx={
+                          // Could be extracted in case we have more
+                          // openData.swiss dependencies
+                          odsIframe
+                            ? {
+                                backgroundColor: "#009688",
+
+                                "&:hover": {
+                                  backgroundColor: darken("#009688", 0.2),
+                                },
+                              }
+                            : null
+                        }
                       >
                         {!odsIframe ? (
                           <Trans id="browse.dataset.create-visualization">

app/charts/bar/rendering-utils.ts

@@ -1,6 +1,9 @@
 import { select, Selection } from "d3-selection";
 
-import { setSegmentValueLabelProps } from "@/charts/shared/render-value-labels";
+import {
+  setSegmentValueLabelProps,
+  setSegmentWrapperValueLabelProps,
+} from "@/charts/shared/render-value-labels";
 import {
   maybeTransition,
   RenderOptions,
@@ -66,14 +69,9 @@ export const renderBars = (
                 })
               )
               .append("xhtml:div")
-              .style("display", "flex")
-              .style("align-items", "center")
-              .style("width", "100%")
-              .style("height", "100%")
+              .call(setSegmentWrapperValueLabelProps)
               .append("xhtml:p")
               .call(setSegmentValueLabelProps)
-              .style("padding-left", "2px")
-              .style("padding-right", "2px")
               .style("color", function (d) {
                 return d.valueLabelColor ?? select(this).style("color");
               })

app/charts/column/rendering-utils.ts

@@ -1,6 +1,9 @@
 import { select, Selection } from "d3-selection";
 
-import { setSegmentValueLabelProps } from "@/charts/shared/render-value-labels";
+import {
+  setSegmentValueLabelProps,
+  setSegmentWrapperValueLabelProps,
+} from "@/charts/shared/render-value-labels";
 import {
   maybeTransition,
   RenderOptions,
@@ -61,11 +64,10 @@ export const renderColumns = (
                   s: (g) => g.attr("y", (d) => d.y),
                 })
               )
+              .append("xhtml:div")
+              .call(setSegmentWrapperValueLabelProps)
               .append("xhtml:p")
               .call(setSegmentValueLabelProps)
-              .style("padding-top", "4px")
-              .style("padding-left", "2px")
-              .style("padding-right", "2px")
               .style("color", function (d) {
                 return d.valueLabelColor ?? select(this).style("color");
               })

app/charts/shared/render-value-labels.ts

@@ -117,17 +117,28 @@ const getValueLabelTextAnchor = (rotate: boolean) => {
   return rotate ? "start" : "middle";
 };
 
-export const setSegmentValueLabelProps = <
+export const setSegmentWrapperValueLabelProps = <
   T extends { valueLabel?: string; valueLabelColor?: string },
 >(
   g: Selection<BaseType, T, SVGGElement, null>
 ) => {
   return g
     .attr(DISABLE_SCREENSHOT_COLOR_WIPE_KEY, true)
-    .style("overflow", "hidden")
+    .style("display", "flex")
+    .style("justify-content", "center")
+    .style("align-items", "center")
     .style("width", "100%")
-    .style("margin", 0)
-    .style("text-align", "center")
+    .style("height", "100%")
+    .style("padding", "2px");
+};
+
+export const setSegmentValueLabelProps = <
+  T extends { valueLabel?: string; valueLabelColor?: string },
+>(
+  g: Selection<BaseType, T, SVGGElement, null>
+) => {
+  return g
+    .style("overflow", "hidden")
     .style("font-size", "12px")
     .style("white-space", "nowrap")
     .style("text-overflow", "ellipsis");