Feat/bars improvements

CHANGELOG.md

@@ -12,6 +12,9 @@ You can also check the
 # Unreleased
 
 - Features
+  - Centered x-axis labels
+  - Added y-axis labels
+  - Implemented Content Security Policy (CSP)
   - Added a new option to the vertical axis on the line chart, allowing users to
     display a dot over the line where it intercepts the x-axis ticks
 

app/charts/area/areas-state.tsx

@@ -348,7 +348,7 @@ const useAreasState = (
     marginRight: right,
   });
   const margins = {
-    top: 50 + yAxisLabelMargin,
+    top: 70 + yAxisLabelMargin,
     right,
     bottom,
     left,

app/charts/bar/bars-grouped-state.tsx

@@ -349,7 +349,7 @@ const useBarsGroupedState = (
   });
   const right = 40;
   const margins = {
-    top: 0,
+    top: 55,
     right,
     bottom: bottom + 30,
     left,
@@ -390,12 +390,12 @@ const useBarsGroupedState = (
 
     const yAnchorRaw = (yScale(y) as number) + bw * 0.5;
     const [xMin, xMax] = extent(xValues, (d) => d ?? 0) as [number, number];
-    const xAnchor = isMobile ? chartHeight : xScale((xMin + xMax) * 0.5);
+    const xAnchor = isMobile ? chartHeight : xScale(xMin + xMax);
     const placement = isMobile
       ? MOBILE_TOOLTIP_PLACEMENT
       : getCenteredTooltipPlacement({
           chartWidth,
-          xAnchor: yAnchorRaw,
+          xAnchor,
           topAnchor: !fields.segment,
         });
 

app/charts/bar/bars-stacked-state.tsx

@@ -410,7 +410,7 @@ const useBarsStackedState = (
   });
   const right = 40;
   const margins = {
-    top: 0,
+    top: 65,
     right,
     bottom: bottom + 30,
     left,
@@ -455,10 +455,10 @@ const useBarsStackedState = (
         formatNumber,
       });
 
-      const yAnchorRaw = (yScale(y) as number) + bw * 0.5;
+      const yAnchorRaw = (yScale(y) as number) + bw;
       const xAnchor = isMobile
         ? chartHeight
-        : xScale(sum(xValues.map((d) => d ?? 0)) * 0.5);
+        : xScale(sum(xValues.map((d) => d ?? 0)));
       const placement = isMobile
         ? MOBILE_TOOLTIP_PLACEMENT
         : getCenteredTooltipPlacement({

app/charts/bar/bars-state.tsx

@@ -206,7 +206,7 @@ const useBarsState = (
   });
   const right = 40;
   const margins = {
-    top: 0,
+    top: 55,
     right,
     bottom: bottom + 30,
     left,

app/charts/column/columns-grouped-state.tsx

@@ -357,7 +357,7 @@ const useColumnsGroupedState = (
     marginRight: right,
   });
   const margins = {
-    top: 50 + yAxisLabelMargin,
+    top: 70 + yAxisLabelMargin,
     right,
     bottom,
     left,

app/charts/column/columns-stacked-state.tsx

@@ -414,7 +414,7 @@ const useColumnsStackedState = (
     marginRight: right,
   });
   const margins = {
-    top: 50 + yAxisLabelMargin,
+    top: 70 + yAxisLabelMargin,
     right,
     bottom,
     left,

app/charts/column/columns-state.tsx

@@ -223,7 +223,7 @@ const useColumnsState = (
     marginRight: right,
   });
   const margins = {
-    top: 50 + yAxisLabelMargin,
+    top: 70 + yAxisLabelMargin,
     right,
     bottom,
     left,

app/charts/shared/axis-height-band.tsx

@@ -8,25 +8,38 @@
   renderContainer,
 } from "@/charts/shared/rendering-utils";
 import { useChartTheme } from "@/charts/shared/use-chart-theme";
+import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import { useTimeFormatUnit } from "@/formatters";
 import { useTransitionStore } from "@/stores/transition";
+import { getTextWidth } from "@/utils/get-text-width";
 
 export const AxisHeightBand = () => {
   const ref = useRef<SVGGElement>(null);
   const state = useChartState() as BarsState;
-  const { xScale, getYLabel, yTimeUnit, yScale, bounds } = state;
+  const { xScale, getYLabel, yTimeUnit, yScale, bounds, yDimension } = state;
   const enableTransition = useTransitionStore((state) => state.enable);
   const transitionDuration = useTransitionStore((state) => state.duration);
   const formatDate = useTimeFormatUnit();
   const { chartHeight, margins } = bounds;
-  const { labelColor, gridColor, labelFontSize, fontFamily, domainColor } =
-    useChartTheme();
+  const {
+    labelColor,
+    axisLabelFontSize,
+    gridColor,
+    labelFontSize,
+    fontFamily,
+    domainColor,
+  } = useChartTheme();
+
+  const fontSize =
+    yScale.bandwidth() > labelFontSize ? labelFontSize : yScale.bandwidth();
+
+  const labelLength = getTextWidth(yDimension.label, {
+    fontSize: Math.max(labelFontSize, fontSize),
+  });
 
   useEffect(() => {
     if (ref.current) {
       const hasNegativeValues = xScale.domain()[0] < 0;
-      const fontSize =
-        yScale.bandwidth() > labelFontSize ? labelFontSize : yScale.bandwidth();
       const axis = axisLeft(yScale)
         .tickSizeOuter(0)
         .tickSizeInner(hasNegativeValues ? -chartHeight : 6);
@@ -60,7 +73,7 @@
         .attr("fill", labelColor)
         .attr("text-anchor", "unset");
     }
   }, [
     chartHeight,
     domainColor,
     enableTransition,
@@ -78,7 +91,18 @@
     yScale,
   ]);
 
-  return <g ref={ref} />;
+  return (
+    <>
+      <g ref={ref} />
+      <foreignObject x={0} y={25} width={labelLength} height={20}>
+        <OpenMetadataPanelWrapper>
+          <span style={{ fontSize: `${axisLabelFontSize}px` }}>
+            {yDimension.label}
+          </span>
+        </OpenMetadataPanelWrapper>
+      </foreignObject>
+    </>
+  );
 };
 
 export const AxisHeightBandDomain = () => {
@@ -107,10 +131,7 @@
       g.selectAll(".tick line").remove();
       g.selectAll(".tick text").remove();
       g.select(".domain")
-        .attr(
-          "transform",
-          `translate(0, -${chartHeight - (yScale(minY) || 0)})`
-        )
+        .attr("transform", `translate(0, 0)`)
         .attr("stroke", domainColor);
     }
   }, [

app/charts/shared/axis-height-linear.tsx

@@ -72,6 +72,7 @@ export const AxisHeightLinear = () => {
         <foreignObject
           width={Math.min(axisTitleWidth, state.bounds.chartWidth)}
           height={height}
+          y={30}
           style={{ display: "flex" }}
         >
           <OpenMetadataPanelWrapper component={state.yMeasure}>

app/charts/shared/axis-width-linear.tsx

@@ -86,7 +86,7 @@ export const AxisWidthLinear = () => {
     xScale,
   ]);
 
-  const { height } = useAxisLabelHeightOffset({
+  const { height, labelWidth } = useAxisLabelHeightOffset({
     label: xAxisLabel,
     width: chartWidth,
     marginLeft: margins.left,
@@ -96,7 +96,7 @@ export const AxisWidthLinear = () => {
   return (
     <>
       <foreignObject
-        x={margins.left}
+        x={margins.left + chartWidth / 2 - labelWidth / 2}
         y={margins.top + chartHeight + 34}
         width={chartWidth}
         height={height}

app/charts/shared/chart-dimensions.tsx

@@ -198,5 +198,6 @@ export const useAxisLabelHeightOffset = ({
   return {
     height: fontSize * LINE_HEIGHT * lines,
     offset: fontSize * LINE_HEIGHT * (lines - 1),
+    labelWidth,
   };
 };

app/charts/shared/containers.tsx

@@ -95,7 +95,7 @@ export const ChartSvg = ({ children }: { children: ReactNode }) => {
         <foreignObject
           {...DISABLE_SCREENSHOT_ATTR}
           width={width - margins.right}
-          y={20}
+          y={0}
           height="26"
           style={{ display: "flex", textAlign: "right" }}
         >