Outer arc doesn't scale and becomes very thin on 4K screens - proposed solution

[tepedersen]

Thanks for an excellent react component. The outer/sub arcs have a fixed width that doesn't scale well on 4K screens, becoming almost invisible.

In order to fix it for a project I'm using the component for I cloned it at customized it to allow specifying subarc width, might be something to incorporate in the library (or at least a solution for those that have the same problem on 4K monitors):

In types/Arc.ts I changed the interface Arc, adding:
subArcWidth?: number,
to the list of members

Then in hooks/arc.ts I altered drawGrafanaOuterArc to use the new property:

const drawGrafanaOuterArc = (gauge: Gauge, resize: boolean = false) => {
  const { outerRadius } = gauge.dimensions.current;
  /** TOR EDIT: Added using subArcWidth to set subarc width using component props */
  const subArcWidth = gauge.props.arc?.subArcWidth || 5;
  //Grafana's outer arc will be populates as the standard arc data would
  if (gauge.props.type == GaugeType.Grafana && resize) {
    gauge.doughnut.current.selectAll(".outerSubArc").remove();
    let outerArc = arc()
      .outerRadius(outerRadius + 2 + subArcWidth)
      .innerRadius(outerRadius + 2)
      .cornerRadius(0)
      .padAngle(0);
       ...

[tepedersen]

This does cause some problems with positioning of the labels for the ticks for the subarcs, I fixed that by changing addTickValue() in labels.ts as follows:

export const addTickValue = (tick: Tick, gauge: Gauge) => {
  const { labels } = gauge.props;
  let arc = gauge.props.arc as Arc;
  let arcWidth = arc.width as number;
  let tickValue = tick?.value as number;
  let { tickAnchor } = calculateAnchorAndAngleByValue(tickValue, gauge);
  let centerToArcLengthSubtract = 27 - arcWidth * 10;
  let isInner = labels?.tickLabels?.type == "inner";
  if (!isInner) centerToArcLengthSubtract = arcWidth * 10 - 10
  else centerToArcLengthSubtract -= 10
  var tickDistanceFromArc = tick.lineConfig?.distanceFromArc || labels?.tickLabels?.defaultTickLineConfig?.distanceFromArc || 0;
  var tickLength = tick.lineConfig?.length || labels?.tickLabels?.defaultTickLineConfig?.length || 0;
  var _shouldHideTickLine = shouldHideTickLine(tick, gauge);
  if (!_shouldHideTickLine) {
    if (isInner) {
      centerToArcLengthSubtract += tickDistanceFromArc;
      centerToArcLengthSubtract += tickLength;
    } else {
      centerToArcLengthSubtract -= tickDistanceFromArc;
      centerToArcLengthSubtract -= tickLength;
    }
  }
  let coords = getLabelCoordsByValue(tickValue, gauge, centerToArcLengthSubtract);
  let tickValueStyle = tick.valueConfig?.style || (labels?.tickLabels?.defaultTickValueConfig?.style || {});
  tickValueStyle = { ...tickValueStyle };
  let text = '';
  let maxDecimalDigits = tick.valueConfig?.maxDecimalDigits || labels?.tickLabels?.defaultTickValueConfig?.maxDecimalDigits;
  if (tick.valueConfig?.formatTextValue) {
    text = tick.valueConfig.formatTextValue(utils.floatingNumber(tickValue, maxDecimalDigits));
  } else if (labels?.tickLabels?.defaultTickValueConfig?.formatTextValue) {
    text = labels.tickLabels.defaultTickValueConfig.formatTextValue(utils.floatingNumber(tickValue, maxDecimalDigits));
  } else if (gauge.props.minValue === 0 && gauge.props.maxValue === 100) {
    text = utils.floatingNumber(tickValue, maxDecimalDigits).toString();
    text += "%";
  } else {
    text = utils.floatingNumber(tickValue, maxDecimalDigits).toString();
  }
  if (labels?.tickLabels?.type == "inner") {
    if (tickAnchor === "end") coords.x += 10;
    if (tickAnchor === "start") coords.x -= 10;
    // if (tickAnchor === "middle") coords.y -= 0;
  } else {
    /** TOR EDIT: Adjust label if subArcWidth increased */
    let adjustX = (gauge.props.arc?.subArcWidth ? gauge.props.arc?.subArcWidth : 0);
    if(tickAnchor === "end") coords.x -= adjustX;
    if(tickAnchor === "start") coords.x += adjustX;
    if (tickAnchor === "middle") coords.y += 2;
  }
  if (tickAnchor === "middle") {
    coords.y += 0;
  } else {
    coords.y += 3;
  }
  tickValueStyle.textAnchor = tickAnchor as any;
  addText(text, coords.x, coords.y, gauge, tickValueStyle, CONSTANTS.tickValueClassname);
}

Haven't tested it with tickAnchor="middle".

Also increasing the thickness of the subarcs probably need to be taken into consideration when finding the size for the "doughnut", for my own use I just adjust with the marginInPercent

[antoniolago]

Hello @tepedersen thanks for your detailed issue and sorry for taking so long.

V2 have been released, I tested the demo page on my 4k TV and it looks ok, but I would like to know if it solved the issue for your use case, if possible let me know