feat: added curved feature to axis component

docs/scriptappy.json

@@ -148,6 +148,23 @@
     }
   },
   "definitions": {
+    "ArcSettings": {
+      "kind": "object",
+      "entries": {
+        "startAngle": {
+          "description": "Start of arc line, in radians",
+          "type": "number"
+        },
+        "endAngle": {
+          "description": "End of arc line, in radians",
+          "type": "number"
+        },
+        "radius": {
+          "description": "Radius of arc line",
+          "type": "number"
+        }
+      }
+    },
     "Brush": {
       "description": "A brush context",
       "kind": "interface",
@@ -1675,6 +1692,11 @@
           "description": "Continuous axis settings",
           "kind": "object",
           "entries": {
+            "arc": {
+              "description": "Optional arc settings",
+              "optional": true,
+              "type": "#/definitions/ArcSettings"
+            },
             "align": {
               "description": "Set the anchoring point of the axis. Available options are `auto/left/right/bottom/top`. In `auto` the axis determines the best option. The options are restricted based on the axis orientation, a vertical axis may only anchor on `left` or `right`",
               "optional": true,

packages/picasso.js/src/core/chart-components/axis/axis-arc-label-node.js

@@ -0,0 +1,102 @@
+function appendStyle(struct, buildOpts) {
+  ['fill', 'fontSize', 'fontFamily'].forEach((style) => {
+    struct[style] = buildOpts.style[style];
+  });
+}
+
+function polarToCartesian(centerX, centerY, radius, angle) {
+  return {
+    x: centerX + radius * Math.cos(angle),
+    y: centerY + radius * Math.sin(angle),
+  };
+}
+
+function checkText(text) {
+  return typeof text === 'string' || typeof text === 'number' ? text : '-';
+}
+
+function collider(struct, tickPos) {
+  if (struct.align === 'right') {
+    if (tickPos.x >= struct.x) {
+      struct.text = '';
+    }
+  }
+}
+
+function calculateMaxWidth(buildOpts, side, innerPos) {
+  let maxWidth;
+  if (side === 'left') {
+    maxWidth = innerPos.x;
+  } else if (side === 'right') {
+    maxWidth = buildOpts.outerRect.width - innerPos.x;
+  } else {
+    maxWidth = Math.max(innerPos.x, buildOpts.outerRect.width - innerPos.x);
+  }
+  return maxWidth;
+}
+
+function appendCollider(tick, struct, buildOpts, tickPos) {
+  collider(tick, struct, buildOpts, tickPos);
+}
+
+function appendBounds(struct, buildOpts) {
+  struct.boundingRect = buildOpts.textBounds(struct);
+}
+
+export default function buildArcLabels(tick, buildOpts) {
+  const rect = buildOpts.innerRect;
+  const centerPoint = { cx: rect.width / 2, cy: rect.height / 2 };
+  const plotSize = Math.min(rect.height, rect.width) / 2;
+  const innerRadius = plotSize * buildOpts.radius;
+  const outerRadius = innerRadius + buildOpts.padding;
+  const startAngle = buildOpts.startAngle;
+  const endAngle = buildOpts.endAngle;
+  const tickLength = buildOpts.tickSize;
+  const angleRange = endAngle - startAngle;
+  const centerOffset = 0.2;
+
+  let angle;
+  let side;
+
+  if (buildOpts.align === 'top' || buildOpts.align === 'bottom') {
+    angle = endAngle - tick.position * angleRange;
+  } else {
+    angle = startAngle + tick.position * angleRange;
+  }
+  if (angle < 0 - centerOffset && angle > -Math.PI + centerOffset) {
+    side = 'left';
+  } else if (angle > 0 + centerOffset && angle < Math.PI - centerOffset) {
+    side = 'right';
+  } else {
+    side = 'center';
+  }
+  angle -= Math.PI / 2;
+  const padding = 6;
+  const innerPos = polarToCartesian(centerPoint.cx, centerPoint.cy, outerRadius + tickLength + padding, angle);
+  let textAnchor;
+  if (side === 'left') {
+    textAnchor = 'end'; // Align text to the right of the x-coordinate
+  } else if (side === 'right') {
+    textAnchor = 'start'; // Align text to the left of the x-coordinate
+  } else {
+    textAnchor = 'middle'; // Center align the text
+  }
+
+  const struct = {
+    type: 'text',
+    text: checkText(tick.label),
+    align: side,
+    x: innerPos.x,
+    y: innerPos.y,
+    maxHeight: buildOpts.maxHeight,
+    maxWidth: calculateMaxWidth(buildOpts, side, innerPos),
+    anchor: textAnchor,
+    baseline: 'middle',
+  };
+
+  const tickPos = polarToCartesian(centerPoint.cx, centerPoint.cy, outerRadius + 6, angle);
+  appendStyle(struct, buildOpts);
+  appendBounds(struct, buildOpts);
+  appendCollider(struct, tickPos);
+  return struct;
+}

packages/picasso.js/src/core/chart-components/axis/axis-arc-node.js

@@ -0,0 +1,33 @@
+import extend from 'extend';
+
+function appendStyle(struct, buildOpts) {
+  extend(struct, buildOpts.style);
+}
+
+export default function buildArcLine(buildOpts) {
+  const rect = buildOpts.innerRect;
+  const centerPoint = { cx: rect.width / 2, cy: rect.height / 2 };
+  const plotSize = Math.min(rect.height, rect.width) / 2;
+  const innerRadius = plotSize * buildOpts.radius;
+  const outerRadius = innerRadius + buildOpts.style.strokeWidth;
+  const startAngle = buildOpts.startAngle;
+  const endAngle = buildOpts.endAngle;
+
+  const struct = {
+    visible: true,
+    type: 'path',
+    arcDatum: { startAngle, endAngle },
+    transform: `translate(0, 0) translate(${centerPoint.cx}, ${centerPoint.cy})`,
+    desc: {
+      share: 1,
+      slice: {
+        cornerRadius: 0,
+        innerRadius,
+        outerRadius,
+      },
+    },
+    ticks: [],
+  };
+  appendStyle(struct, buildOpts);
+  return struct;
+}

packages/picasso.js/src/core/chart-components/axis/axis-arc-tick-node.js

@@ -0,0 +1,41 @@
+import extend from 'extend';
+
+function appendStyle(struct, buildOpts) {
+  extend(struct, buildOpts.style);
+}
+
+function polarToCartesian(centerX, centerY, radius, angle) {
+  return {
+    x: centerX + radius * Math.cos(angle),
+    y: centerY + radius * Math.sin(angle),
+  };
+}
+
+export default function buildArcTicks(tick, buildOpts) {
+  const rect = buildOpts.innerRect;
+  const centerPoint = { cx: rect.width / 2, cy: rect.height / 2 };
+  const plotSize = Math.min(rect.height, rect.width) / 2;
+  const innerRadius = plotSize * buildOpts.radius;
+  const outerRadius = innerRadius + buildOpts.padding;
+  const startAngle = buildOpts.startAngle;
+  const endAngle = buildOpts.endAngle;
+  const tickLength = buildOpts.tickSize;
+  const angleRange = endAngle - startAngle;
+
+  let angle = endAngle - tick.position * angleRange;
+
+  angle -= Math.PI / 2;
+  const innerPos = polarToCartesian(centerPoint.cx, centerPoint.cy, outerRadius + tickLength, angle);
+  const outerPos = polarToCartesian(centerPoint.cx, centerPoint.cy, outerRadius, angle);
+
+  const struct = {
+    type: 'line',
+    x1: innerPos.x,
+    y1: innerPos.y,
+    x2: outerPos.x,
+    y2: outerPos.y,
+    value: tick.value,
+  };
+  appendStyle(struct, buildOpts);
+  return struct;
+}

packages/picasso.js/src/core/chart-components/axis/axis-default-settings.js

@@ -118,10 +118,18 @@ const DEFAULT_DISCRETE_SETTINGS = {
   align: 'auto',
 };
 
+/**
+ * @typedef {object} ArcSettings
+ * @property {number} startAngle - Start of arc line, in radians
+ * @property {number} endAngle - End of arc line, in radians
+ * @property {number} radius - Radius of arc line
+ */
+
 /**
  * Continuous axis settings
  * @typedef {object}
  * @alias ComponentAxis~ContinuousSettings
+ * @property {ArcSettings=} arc - Optional arc settings
  * @example
  * {
  *  type: 'axis',

packages/picasso.js/src/core/chart-components/axis/axis-node-builder.js

@@ -5,6 +5,9 @@ import { testRectRect } from '../../math/narrow-phase-collision';
 import { getClampedValue } from './axis-label-size';
 import getHorizontalContinuousWidth from './get-continuous-label-rect';
 import { expandRect } from '../../geometry/util';
+import buildArcLine from './axis-arc-node';
+import buildArcTicks from './axis-arc-tick-node';
+import buildArcLabels from './axis-arc-label-node';
 
 function tickSpacing(settings) {
   let spacing = 0;
@@ -13,6 +16,12 @@ function tickSpacing(settings) {
   spacing += settings.ticks.show ? settings.ticks.margin : 0;
   return spacing;
 }
+function arcTickSpacing(settings) {
+  let spacing = 0;
+  spacing += settings.line.show ? settings.line.strokeWidth / 2 : 0;
+  spacing += settings.ticks.show ? settings.ticks.margin : 0;
+  return spacing;
+}
 
 function tickMinorSpacing(settings) {
   return settings.line.strokeWidth + settings.minorTicks.margin;
@@ -24,6 +33,12 @@ function labelsSpacing(settings) {
   spacing += tickSpacing(settings) + settings.labels.margin;
   return spacing;
 }
+function arcLabelSpacing(settings) {
+  let spacing = 0;
+  spacing += settings.ticks.show ? settings.ticks.tickSize : 0;
+  spacing += arcTickSpacing(settings) + settings.labels.margin;
+  return spacing;
+}
 
 function calcActualTextRect({ style, measureText, tick }) {
   return measureText({
@@ -45,6 +60,10 @@ function tickBuilder(ticks, buildOpts) {
   return ticks.map((tick) => buildTick(tick, buildOpts));
 }
 
+function arcTickBuilder(ticks, buildOpts) {
+  return ticks.map((tick) => buildArcTicks(tick, buildOpts));
+}
+
 function tickBandwidth(scale, tick) {
   return tick ? Math.abs(tick.end - tick.start) : scale.bandwidth();
 }
@@ -58,6 +77,15 @@ function labelBuilder(ticks, buildOpts, resolveTickOpts) {
   });
 }
 
+function arcLabelBuilder(ticks, buildOpts, resolveTickOpts) {
+  return ticks.map((tick, idx) => {
+    resolveTickOpts(tick, idx);
+    const label = buildArcLabels(tick, buildOpts);
+    label.data = tick.data;
+    return label;
+  });
+}
+
 function layeredLabelBuilder(ticks, buildOpts, settings, resolveTickOpts) {
   const padding = buildOpts.padding;
   const spacing = labelsSpacing(settings);
@@ -213,19 +241,30 @@ export default function nodeBuilder(isDiscrete) {
     const tilted = state.labels.activeMode === 'tilted';
     const layered = state.labels.activeMode === 'layered';
     let majorTickNodes;
-
+    if (settings.arc) {
+      buildOpts.startAngle = settings.arc.startAngle;
+      buildOpts.endAngle = settings.arc.endAngle;
+      buildOpts.radius = settings.arc.radius;
+    }
     if (settings.line.show) {
       buildOpts.style = settings.line;
       buildOpts.padding = settings.paddingStart;
-
-      nodes.push(buildLine(buildOpts));
+      if (settings.arc) {
+        nodes.push(buildArcLine(buildOpts));
+      } else {
+        nodes.push(buildLine(buildOpts));
+      }
     }
     if (settings.ticks.show) {
       buildOpts.style = settings.ticks;
       buildOpts.tickSize = settings.ticks.tickSize;
       buildOpts.padding = tickSpacing(settings);
-
-      majorTickNodes = tickBuilder(major, buildOpts);
+      if (settings.arc) {
+        buildOpts.padding = arcTickSpacing(settings);
+        majorTickNodes = arcTickBuilder(major, buildOpts);
+      } else {
+        majorTickNodes = tickBuilder(major, buildOpts);
+      }
     }
     if (settings.labels.show) {
       const padding = labelsSpacing(settings);
@@ -260,9 +299,11 @@ export default function nodeBuilder(isDiscrete) {
           tick,
         });
       };
-
       let labelNodes = [];
-      if (layered && (settings.align === 'top' || settings.align === 'bottom')) {
+      if (settings.arc) {
+        buildOpts.padding = arcLabelSpacing(settings);
+        labelNodes = arcLabelBuilder(major, buildOpts, resolveTickOpts);
+      } else if (layered && (settings.align === 'top' || settings.align === 'bottom')) {
         labelNodes = layeredLabelBuilder(major, buildOpts, settings, resolveTickOpts);
       } else {
         labelNodes = labelBuilder(major, buildOpts, resolveTickOpts);
@@ -280,7 +321,6 @@ export default function nodeBuilder(isDiscrete) {
       buildOpts.style = settings.minorTicks;
       buildOpts.tickSize = settings.minorTicks.tickSize;
       buildOpts.padding = tickMinorSpacing(settings);
-
       nodes.push(...tickBuilder(minor, buildOpts));
     }
 

packages/picasso.js/types/index.d.ts

@@ -67,6 +67,12 @@ declare namespace picassojs {
 }
 
 declare namespace picassojs {
+    type ArcSettings = {
+        startAngle: number;
+        endAngle: number;
+        radius: number;
+    };
+
     /**
      * A brush context
      */
@@ -552,6 +558,7 @@ declare namespace picassojs {
 
     namespace ComponentAxis {
         type ContinuousSettings = {
+            arc?: picassojs.ArcSettings;
             align?: string;
             labels: {
                 align?: number;