feat: added curved feature to axis component

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

@@ -0,0 +1,90 @@
+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 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 = buildOpts.radius !== undefined ? plotSize * buildOpts.radius : plotSize * 0.5;
+  const outerRadius = innerRadius + 1;
+  const startAngle = buildOpts.startAngle !== undefined ? buildOpts.startAngle : -Math.PI / 2;
+  const endAngle = buildOpts.endAngle !== undefined ? buildOpts.endAngle : Math.PI / 2;
+  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: buildOpts.maxWidth,
+    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,36 @@
+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 = buildOpts.radius !== undefined ? plotSize * buildOpts.radius : plotSize * 0.5;
+  const outerRadius = innerRadius + 1;
+
+  const startAngle = buildOpts.startAngle !== undefined ? buildOpts.startAngle : -Math.PI / 2;
+  const endAngle = buildOpts.endAngle !== undefined ? buildOpts.endAngle : Math.PI / 2;
+  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,
+      },
+    },
+    innerRadius,
+    outerRadius,
+    ticks: [],
+  };
+  appendStyle(struct, buildOpts);
+  return struct;
+}

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

@@ -0,0 +1,42 @@
+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 = buildOpts.radius !== undefined ? plotSize * buildOpts.radius : plotSize * 0.5;
+  const outerRadius = innerRadius + 1;
+  const startAngle = buildOpts.startAngle !== undefined ? buildOpts.startAngle : -Math.PI / 2;
+  const endAngle = buildOpts.endAngle !== undefined ? buildOpts.endAngle : Math.PI / 2;
+  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',
+    stroke: buildOpts.tickColor,
+    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-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;
@@ -45,6 +48,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 +65,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);
@@ -214,18 +230,30 @@ export default function nodeBuilder(isDiscrete) {
     const layered = state.labels.activeMode === 'layered';
     let majorTickNodes;
 
+    if (settings.isRadial) {
+      buildOpts.startAngle = settings.startAngle;
+      buildOpts.endAngle = settings.endAngle;
+      buildOpts.radius = settings.radius;
+    }
     if (settings.line.show) {
       buildOpts.style = settings.line;
       buildOpts.padding = settings.paddingStart;
-
-      nodes.push(buildLine(buildOpts));
+      if (settings.isRadial) {
+        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);
+      buildOpts.tickColor = settings.ticks.tickColor || '#000';
+      if (settings.isRadial) {
+        majorTickNodes = arcTickBuilder(ticks, buildOpts);
+      } else {
+        majorTickNodes = tickBuilder(major, buildOpts);
+      }
     }
     if (settings.labels.show) {
       const padding = labelsSpacing(settings);
@@ -262,7 +290,9 @@ export default function nodeBuilder(isDiscrete) {
       };
 
       let labelNodes = [];
-      if (layered && (settings.align === 'top' || settings.align === 'bottom')) {
+      if (settings.isRadial) {
+        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 +310,6 @@ export default function nodeBuilder(isDiscrete) {
       buildOpts.style = settings.minorTicks;
       buildOpts.tickSize = settings.minorTicks.tickSize;
       buildOpts.padding = tickMinorSpacing(settings);
-
       nodes.push(...tickBuilder(minor, buildOpts));
     }