@vizzly/dashboard 0.15.0-dev-a0c2e94601580e6492c72e10cbc684c57074babe → 0.15.0-dev-ec22f31a049b4f844d3ea606a85bd487c4553b03

package/dist/dashboard.cjs.development.js

@@ -53055,8 +53055,10 @@ var SunburstChartView = function SunburstChartView(props) {
     setTooltipLabel = _useState5[1];
   var xScale = d3Scale.scaleLinear().domain(xDomain).range(xRange);
   var yScale = d3Scale.scaleSqrt().domain(yDomain).range(yRange);
-  var width = props.width * 3 / 5;
-  var height = 500;
+  var width = props.width * 3 / 6;
+  var height = props.height * 0.9;
+  var minDimension = Math.min(props.width, props.height);
+  var centeredRatio = minDimension / 2.5;
   var sunburstChartComponent = getComponentInterface(props.attributes.type);
   var headerProps = {
     displayTitle: props.attributes.displayTitle,
@@ -53076,8 +53078,8 @@ var SunburstChartView = function SunburstChartView(props) {
     order: props.attributes.order
   };
   React.useEffect(function () {
-    setYRange([yRange[0], width / 2]);
-  }, [width]);
+    setYRange([yRange[0], centeredRatio]);
+  }, [centeredRatio]);
   var arc = d3Shape.arc().startAngle(function (d) {
     return Math.max(0, Math.min(2 * Math.PI, xScale(d.x0)));
   }).endAngle(function (d) {
@@ -53090,7 +53092,7 @@ var SunburstChartView = function SunburstChartView(props) {
   var handleClick = function handleClick(d) {
     setXDomain([d.x0, d.x1]);
     setYDomain([d.y0, 1]);
-    setYRange([d.y0 ? 20 : 0, width / 2]);
+    setYRange([d.y0 ? 20 : 0, centeredRatio]);
   };
   var handleUpdate = function handleUpdate(t, xd, yd, yr) {
     xScale.domain(xd(t));
@@ -53177,7 +53179,7 @@ var SunburstChartView = function SunburstChartView(props) {
         height: height,
         children: jsxRuntime.jsx(Partition, {
           top: 0,
-          left: centerX * 2 / 3,
+          left: centerX + DEFAULT_MARGINS.left,
           root: root,
           children: jsxRuntime.jsx(web.Spring, {
             reset: true,