fix: removed tickColor, updated axis-default-settings and added arc-p…

…adding
qlik-oss · Nov 6, 2024 · 336f4e6 · 336f4e6
1 parent 6a245d4
commit 336f4e6
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 15 deletions.
diff --git a/docs/scriptappy.json b/docs/scriptappy.json
@@ -1681,6 +1681,33 @@
               "defaultValue": "auto",
               "type": "string"
             },
+            "arc": {
+              "kind": "object",
+              "entries": {
+                "endAngle": {
+                  "description": "End of arc line",
+                  "optional": true,
+                  "type": "number"
+                },
+                "isRadial": {
+                  "description": "Flag that determines if axis is radial",
+                  "optional": true,
+                  "defaultValue": false,
+                  "type": "boolean"
+                },
+                "radius": {
+                  "description": "Radius of arc line",
+                  "optional": true,
+                  "defaultValue": 0.5,
+                  "type": "number"
+                },
+                "startAngle": {
+                  "description": "Start of arc line",
+                  "optional": true,
+                  "type": "number"
+                }
+              }
+            },
             "labels": {
               "kind": "object",
               "entries": {

diff --git a/packages/picasso.js/src/core/chart-components/axis/axis-arc-label-node.js b/packages/picasso.js/src/core/chart-components/axis/axis-arc-label-node.js
@@ -48,7 +48,7 @@ export default function buildArcLabels(tick, buildOpts) {
   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 outerRadius = innerRadius + buildOpts.padding;
   const startAngle = buildOpts.startAngle !== undefined ? buildOpts.startAngle : -Math.PI / 2;
   const endAngle = buildOpts.endAngle !== undefined ? buildOpts.endAngle : Math.PI / 2;
   const tickLength = buildOpts.tickSize;

diff --git a/packages/picasso.js/src/core/chart-components/axis/axis-arc-node.js b/packages/picasso.js/src/core/chart-components/axis/axis-arc-node.js
@@ -9,8 +9,8 @@ export default function buildArcLine(buildOpts) {
   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 innerRadius = plotSize * buildOpts.radius;
+  const outerRadius = innerRadius + buildOpts.style.strokeWidth;
 
   const startAngle = buildOpts.startAngle !== undefined ? buildOpts.startAngle : -Math.PI / 2;
   const endAngle = buildOpts.endAngle !== undefined ? buildOpts.endAngle : Math.PI / 2;

diff --git a/packages/picasso.js/src/core/chart-components/axis/axis-arc-tick-node.js b/packages/picasso.js/src/core/chart-components/axis/axis-arc-tick-node.js
@@ -16,7 +16,7 @@ export default function buildArcTicks(tick, buildOpts) {
   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 outerRadius = innerRadius + buildOpts.padding;
   const startAngle = buildOpts.startAngle !== undefined ? buildOpts.startAngle : -Math.PI / 2;
   const endAngle = buildOpts.endAngle !== undefined ? buildOpts.endAngle : Math.PI / 2;
   const tickLength = buildOpts.tickSize;
@@ -30,7 +30,6 @@ export default function buildArcTicks(tick, buildOpts) {
 
   const struct = {
     type: 'line',
-    stroke: buildOpts.tickColor,
     x1: innerPos.x,
     y1: innerPos.y,
     x2: outerPos.x,

diff --git a/packages/picasso.js/src/core/chart-components/axis/axis-default-settings.js b/packages/picasso.js/src/core/chart-components/axis/axis-default-settings.js
@@ -199,6 +199,23 @@ const DEFAULT_CONTINUOUS_SETTINGS = {
      * @type {boolean=} */
     show: true,
   },
+  /**
+   * @typedef {object}
+   */
+  arc: {
+    /** Flag that determines if axis is radial
+     * @type {boolean=} */
+    isRadial: false,
+    /** Start of arc line
+     * @type {number=} */
+    startAngle: -Math.PI / 2,
+    /** End of arc line
+     * @type {number=} */
+    endAngle: Math.PI / 2,
+    /** Radius of arc line
+     * @type {number=} */
+    radius: 0.5,
+  },
   /** Padding in direction perpendicular to the axis
    * @type {number=} */
   paddingStart: 0,

diff --git a/packages/picasso.js/src/core/chart-components/axis/axis-node-builder.js b/packages/picasso.js/src/core/chart-components/axis/axis-node-builder.js
@@ -16,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;
@@ -27,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({
@@ -230,15 +242,15 @@ 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.arc.isRadial) {
+      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;
-      if (settings.isRadial) {
+      if (settings.arc.isRadial) {
         nodes.push(buildArcLine(buildOpts));
       } else {
         nodes.push(buildLine(buildOpts));
@@ -248,9 +260,9 @@ export default function nodeBuilder(isDiscrete) {
       buildOpts.style = settings.ticks;
       buildOpts.tickSize = settings.ticks.tickSize;
       buildOpts.padding = tickSpacing(settings);
-      buildOpts.tickColor = settings.ticks.tickColor || '#000';
-      if (settings.isRadial) {
-        majorTickNodes = arcTickBuilder(ticks, buildOpts);
+      if (settings.arc.isRadial) {
+        buildOpts.padding = arcTickSpacing(settings);
+        majorTickNodes = arcTickBuilder(major, buildOpts);
       } else {
         majorTickNodes = tickBuilder(major, buildOpts);
       }
@@ -288,9 +300,9 @@ export default function nodeBuilder(isDiscrete) {
           tick,
         });
       };
-
       let labelNodes = [];
-      if (settings.isRadial) {
+      if (settings.arc.isRadial) {
+        buildOpts.padding = arcLabelSpacing(settings);
         labelNodes = arcLabelBuilder(major, buildOpts, resolveTickOpts);
       } else if (layered && (settings.align === 'top' || settings.align === 'bottom')) {
         labelNodes = layeredLabelBuilder(major, buildOpts, settings, resolveTickOpts);

diff --git a/packages/picasso.js/types/index.d.ts b/packages/picasso.js/types/index.d.ts
@@ -553,6 +553,12 @@ declare namespace picassojs {
     namespace ComponentAxis {
         type ContinuousSettings = {
             align?: string;
+            arc: {
+                endAngle?: number;
+                isRadial?: boolean;
+                radius?: number;
+                startAngle?: number;
+            };
             labels: {
                 align?: number;
                 filterOverlapping?: boolean;