refactor: ♻️ improve code readability

docs/guides/annotations.md

@@ -304,29 +304,29 @@ A value for the y-value of the upper range flag dot
 
 The area is a shaded area that represents a confidence interval. It is used to show the range of values within which the true value is likely to fall.
 
-### sszvis.annotationConfArea
+### sszvis.annotationConfidenceArea
 
-#### `annotationConfArea.x`
+#### `annotationConfidenceArea.x`
 
 The x-position of the confidence area.
 
-#### `annotationConfArea.y0`
+#### `annotationConfidenceArea.y0`
 
 The y-position of the lower bound of the confidence area.
 
-#### `annotationConfArea.y1`
+#### `annotationConfidenceArea.y1`
 
 The y-position of the upper bound of the confidence area.
 
-#### `annotationConfArea.stroke`
+#### `annotationConfidenceArea.stroke`
 
 A string for the stroke color of the confidence area.
 
-#### `annotationConfArea.strokeWidth`
+#### `annotationConfidenceArea.strokeWidth`
 
 A number for the stroke width of the confidence area.
 
-#### `annotationConfArea.fill`
+#### `annotationConfidenceArea.fill`
 
 A string for the fill color of the confidence area.
 

docs/line-chart/README.md

@@ -119,7 +119,7 @@ Comparison of two datasets with huge differences in values over the same time pe
 
 ## Usage example: Confidence intervals
 
-When the dataset has confidence intervals, you can use the `sszvis.annotationConfArea` component to create a line chart with confidence intervals.
+When the dataset has confidence intervals, you can use the `sszvis.annotationConfidenceArea` component to create a line chart with confidence intervals.
 
 ```project
 {

docs/line-chart/confidence.js

@@ -165,7 +165,7 @@
 
     // for confindence interval
     const area = sszvis
-      .annotationConfArea()
+      .annotationConfidenceArea()
       .x(sszvis.compose(xScale, xAcc))
       .y0(sszvis.compose(yScale, lAcc))
       .y1(sszvis.compose(yScale, uAcc))

src/annotation/confArea.js → src/annotation/confidenceArea.js

@@ -1,13 +1,13 @@
 /**
- * @function sszvis.annotationConfArea
+ * @function sszvis.annotationConfidenceArea
  *
  * A component for creating confidence areas. The component should be passed
  * an array of data values, each of which will be used to render a confidence area
  * by passing it through the accessor functions. You can specify the x, y0, and y1
  * properties to define the area. The component also supports stroke, strokeWidth,
  * and fill properties for styling.
  *
- * @module sszvis/annotation/confArea
+ * @module sszvis/annotation/confidenceArea
  *
  * @param {function} x             The x-accessor function.
  * @param {function} y0            The y0-accessor function.

src/annotation/index.js

@@ -7,4 +7,4 @@ export { annotationRuler, rulerLabelVerticalSeparate } from "./ruler.js";
 export { default as tooltip } from "./tooltip.js";
 export { default as tooltipAnchor } from "./tooltipAnchor.js";
 export { default as fitTooltip } from "./fitTooltip.js";
-export { default as annotationConfArea } from "./confArea.js";
+export { default as annotationConfidenceArea } from "./confidenceArea.js";

src/annotation/ruler.js

@@ -176,7 +176,7 @@ export const annotationRuler = () =>
 
 export const rulerLabelVerticalSeparate = (cAcc) => (g) => {
   const THRESHOLD = 2;
-  let labelBounds = [];
+  const labelBounds = [];
 
   // Reset vertical shift
   g.selectAll("text").each(function () {
@@ -195,7 +195,7 @@ export const rulerLabelVerticalSeparate = (cAcc) => (g) => {
   });
 
   // Sort by vertical position (only supports labels of same height)
-  labelBounds = labelBounds.sort((a, b) => ascending(a.top, b.top));
+  labelBounds.sort((a, b) => ascending(a.top, b.top));
 
   // Calculate overlap and correct position
   for (let i = 0; i < 10; i++) {

src/component/nestedStackedBar.js

@@ -47,13 +47,7 @@ export const nestedStackedBarsVertical = () =>
       const selection = select(this);
       const props = selection.props();
 
-      const offset = props.offset;
-      const xScale = props.xScale;
-      const yScale = props.yScale;
-      const fill = props.fill;
-      const tooltip = props.tooltip;
-      const xAcc = props.xAcc;
-      const xLabel = props.xLabel;
+      const { offset, xScale, yScale, fill, tooltip, xAcc, xLabel } = props;
 
       const xAxis = axisX
         .ordinal()