[Goal] Full circle is cut off when container is resized

[Kuznietsov]

Problem description

While trying to replace the vislib gauge with the goal from the elastic-charts, it has been found the further issue.

If the full circle has been drawn and its container has been resized, the bottom of the circle is cut off and a lot of space on the top is left.

Circle angle configuration

const angleStart = Math.PI / 2;
const angleEnd = -(Math.PI + Math.PI / 2);

Current behavior

circle.cut.mov

Expected behavior

After the resizing, the circle should be in the middle of the container and should be resized according to the new size of the container.

---

Version:

• Elastic Charts: 43.1.1

---

Kibana Cross Issues:

• [Visualize] replace Goal and Gauge vislib implementation with elastic-charts kibana#118867

[markov00]

@Kunzetsov this is actually strange and looks like not an issue with the elastic-charts, but with the style of the container.
I've tried locally in our storybook, and the parent can be reduced to a very small size keeping the chart within its center

Taking a look at your image and recording it looks like the chart has been pushed down a bit from the center of the rendering panel: see the alignment here for example

Please can you double check the CSS style of the chart and make sure the parent doesn't have any padding/marging/flexing for its children?

[Kuznietsov]

export const Example = () => (
  <Chart>
    <Settings baseTheme={useBaseTheme()} />
    <Goal
      id="spec_1"
      subtype={subtype}
      base={0}
      target={260}
      actual={280}
      bands={[200, 250, 300]}
      ticks={[0, 50, 100, 150, 200, 250, 265, 280]}
      tickValueFormatter={({ value }: BandFillColorAccessorInput) => String(value)}
      bandFillColor={({ value }: BandFillColorAccessorInput) => bandFillColor(value)}
      labelMajor=""
      labelMinor=""
      centralMajor="280 MB/s"
      centralMinor=""
      angleStart={Math.PI / 2}
      angleEnd={-(Math.PI + Math.PI / 2)}
    />
  </Chart>
);

[markov00]

it looks strage (with a padding on the top), can you please check this link https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--full-circle&globals=theme:light

[Kuznietsov]

@markov00, about cutting the bottom: https://codesandbox.io/s/festive-yalow-d1rsik?file=/src/App.tsx

[Kuznietsov]

@markov00, here is a difference:

your example:

      angleStart={Math.PI + Math.PI / 2}
      angleEnd={-Math.PI / 2}

my example:

      angleStart={Math.PI / 2}
      angleEnd={-(Math.PI + Math.PI / 2)}

Your example is working perfectly, but I need the indicator of value to start from the top point of the circle.

[markov00]

oh that's interesting thanks, I will take a look and see what is going on there

[Kuznietsov]

@markov00, thanks a lot)

[markov00]

the issue is caused by a wrong calculation of the saggitta introduced here: #1413
@nickofthyme can you please take a look and see why those different angles are not working nicely?