Merge pull request #2272 from visualize-admin/feat/show-values-improvements

feat: Show values improvements

Author: bprusinowski

CHANGELOG.md

@@ -18,6 +18,7 @@ You can also check the
   - Dimension unit labels are now fetched not only in English language, but
     others too – and we fall back to a regular string in case the label is not
     localized
+  - Value labels in segmented bar charts are now centered horizontally
   - It's now possible to enter www links in text blocks link elements, instead
     of having to always use https://
 - Fixes

app/charts/bar/rendering-utils.ts

@@ -72,7 +72,8 @@ export const renderBars = (
               .style("height", "100%")
               .append("xhtml:p")
               .call(setSegmentValueLabelStyles)
-              .style("padding-left", "4px")
+              .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

@@ -64,6 +64,8 @@ export const renderColumns = (
               .append("xhtml:p")
               .call(setSegmentValueLabelStyles)
               .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

@@ -123,6 +123,7 @@ export const setSegmentValueLabelStyles = <
 ) => {
   return g
     .style("overflow", "hidden")
+    .style("width", "100%")
     .style("margin", 0)
     .style("text-align", "center")
     .style("font-size", "12px")

app/configurator/components/filters.tsx

@@ -445,7 +445,7 @@ const MultiFilterContent = ({
         <Divider sx={{ mt: 4 }} />
       </Box>
       {enableSettingShowValuesBySegment ? (
-        <Flex justifyContent="flex-end" gap={2}>
+        <Flex gap={2} alignItems="center" sx={{ color: "primary.main" }}>
           <Button
             variant="text"
             color="blue"
@@ -467,6 +467,7 @@ const MultiFilterContent = ({
           >
             <Trans id="controls.filter.show-values.all">Show all values</Trans>
           </Button>
+          •
           <Button
             variant="text"
             color="blue"