@multiplatform.one/components 7.7.6 → 7.8.0

package/dist/cjs/charts/LineChart.cjs

@@ -28,6 +28,7 @@ __export(LineChart_exports, {
 module.exports = __toCommonJS(LineChart_exports);
 var import_i18n = require("../shared/i18n.cjs");
 var import_Axis = require("./Axis.cjs");
+var import_ChartDataView = require("./ChartDataView.cjs");
 var import_ChartSurface = require("./ChartSurface.cjs");
 var import_accessibility = require("./accessibility.cjs");
 var import_composeChart = require("./composeChart.cjs");
@@ -74,74 +75,87 @@ function LineChart({
     formatValue: valueFormatter
   });
   const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
-    label: ariaLabel,
-    height,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartDataView.ChartDataFrame, {
+    data,
+    title,
+    valueFormatter,
     width,
-    ...stackProps,
-    children: size => {
-      const domain = (0, import_math.valueDomain)(data.map(datum => datum.value));
-      const marginScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [0, 1]
-      });
-      const tickValues = (0, import_math.getLinearTicks)(marginScale, yTicks);
-      const plot = (0, import_composeChart.computeCartesianPlot)(size, {
-        showXAxis,
-        showYAxis,
-        yTickLabels: tickValues.map(value => format(value)),
-        fontSize: labelFontSize
-      });
-      if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
-      const xScale = (0, import_math.createPointScale)({
-        domain: data.map(datum => datum.label),
-        range: [plot.x, plot.x + plot.width],
-        padding: 0.5
-      });
-      const yScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [plot.y + plot.height, plot.y]
-      });
-      const points = data.map(datum => ({
-        x: xScale(datum.label) ?? plot.x,
-        y: yScale(datum.value)
-      }));
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [showYAxis || showGrid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.YAxis, {
-          plot,
-          scale: yScale,
-          ticks: yTicks,
-          tickFormat: value => format(value),
-          showLabels: showYAxis,
-          showGrid
-        }) : null, showArea ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.AreaSeries, {
-          points,
-          baseline: plot.y + plot.height,
-          color: stroke,
-          opacity: areaOpacity,
-          curve
-        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.LineSeries, {
-          data,
-          points,
-          color: stroke,
-          strokeWidth,
-          curve,
-          showPoints,
-          bounds: size,
-          onDatumPress,
-          onDatumHoverIn,
-          onDatumHoverOut,
-          datumLabel: interactive ? datum => (0, import_accessibility.describeDatum)({
-            datum,
-            formatValue: valueFormatter
-          }) : void 0
-        }), showXAxis ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.XAxis, {
-          plot,
-          scale: xScale,
-          tickValues: (0, import_composeChart.thinCategories)(data.map(datum => datum.label), plot.width, labelFontSize)
-        }) : null]
-      });
-    }
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
+      label: ariaLabel,
+      proof: {
+        kind: showArea ? "area" : "line",
+        separated: false,
+        datumText: false,
+        datumValues: (0, import_accessibility.chartDatumText)(data, valueFormatter),
+        datumCount: data.length
+      },
+      height,
+      width,
+      ...stackProps,
+      children: size => {
+        const domain = (0, import_math.valueDomain)(data.map(datum => datum.value));
+        const marginScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [0, 1]
+        });
+        const tickValues = (0, import_math.getLinearTicks)(marginScale, yTicks);
+        const plot = (0, import_composeChart.computeCartesianPlot)(size, {
+          showXAxis,
+          showYAxis,
+          yTickLabels: tickValues.map(value => format(value)),
+          fontSize: labelFontSize
+        });
+        if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
+        const xScale = (0, import_math.createPointScale)({
+          domain: data.map(datum => datum.label),
+          range: [plot.x, plot.x + plot.width],
+          padding: 0.5
+        });
+        const yScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [plot.y + plot.height, plot.y]
+        });
+        const points = data.map(datum => ({
+          x: xScale(datum.label) ?? plot.x,
+          y: yScale(datum.value)
+        }));
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [showYAxis || showGrid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.YAxis, {
+            plot,
+            scale: yScale,
+            ticks: yTicks,
+            tickFormat: value => format(value),
+            showLabels: showYAxis,
+            showGrid
+          }) : null, showArea ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.AreaSeries, {
+            points,
+            baseline: plot.y + plot.height,
+            color: stroke,
+            opacity: areaOpacity,
+            curve
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.LineSeries, {
+            data,
+            points,
+            color: stroke,
+            strokeWidth,
+            curve,
+            showPoints,
+            bounds: size,
+            onDatumPress,
+            onDatumHoverIn,
+            onDatumHoverOut,
+            datumLabel: interactive ? datum => (0, import_accessibility.describeDatum)({
+              datum,
+              formatValue: valueFormatter
+            }) : void 0
+          }), showXAxis ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.XAxis, {
+            plot,
+            scale: xScale,
+            tickValues: (0, import_composeChart.thinCategories)(data.map(datum => datum.label), plot.width, labelFontSize)
+          }) : null]
+        });
+      }
+    })
   });
 }
 function AreaChart(props) {

package/dist/cjs/charts/LineChart.native.js

@@ -31,6 +31,7 @@ module.exports = __toCommonJS(LineChart_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_i18n = require("../shared/i18n.native.js");
 var import_Axis = require("./Axis.native.js");
+var import_ChartDataView = require("./ChartDataView.native.js");
 var import_ChartSurface = require("./ChartSurface.native.js");
 var import_accessibility = require("./accessibility.native.js");
 var import_composeChart = require("./composeChart.native.js");
@@ -77,89 +78,102 @@ function LineChart(param) {
     formatValue: valueFormatter
   });
   var interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
-    label: ariaLabel,
-    height,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartDataView.ChartDataFrame, {
+    data,
+    title,
+    valueFormatter,
     width,
-    ...stackProps,
-    children: function children(size) {
-      var domain = (0, import_math.valueDomain)(data.map(function (datum) {
-        return datum.value;
-      }));
-      var marginScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [0, 1]
-      });
-      var tickValues = (0, import_math.getLinearTicks)(marginScale, yTicks);
-      var plot = (0, import_composeChart.computeCartesianPlot)(size, {
-        showXAxis,
-        showYAxis,
-        yTickLabels: tickValues.map(function (value) {
-          return format(value);
-        }),
-        fontSize: labelFontSize
-      });
-      if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
-      var xScale = (0, import_math.createPointScale)({
-        domain: data.map(function (datum) {
-          return datum.label;
-        }),
-        range: [plot.x, plot.x + plot.width],
-        padding: 0.5
-      });
-      var yScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [plot.y + plot.height, plot.y]
-      });
-      var points = data.map(function (datum) {
-        var _xScale;
-        return {
-          x: (_xScale = xScale(datum.label)) !== null && _xScale !== void 0 ? _xScale : plot.x,
-          y: yScale(datum.value)
-        };
-      });
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [showYAxis || showGrid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.YAxis, {
-          plot,
-          scale: yScale,
-          ticks: yTicks,
-          tickFormat: function tickFormat(value) {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
+      label: ariaLabel,
+      proof: {
+        kind: showArea ? "area" : "line",
+        separated: false,
+        datumText: false,
+        datumValues: (0, import_accessibility.chartDatumText)(data, valueFormatter),
+        datumCount: data.length
+      },
+      height,
+      width,
+      ...stackProps,
+      children: function children(size) {
+        var domain = (0, import_math.valueDomain)(data.map(function (datum) {
+          return datum.value;
+        }));
+        var marginScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [0, 1]
+        });
+        var tickValues = (0, import_math.getLinearTicks)(marginScale, yTicks);
+        var plot = (0, import_composeChart.computeCartesianPlot)(size, {
+          showXAxis,
+          showYAxis,
+          yTickLabels: tickValues.map(function (value) {
             return format(value);
-          },
-          showLabels: showYAxis,
-          showGrid
-        }) : null, showArea ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.AreaSeries, {
-          points,
-          baseline: plot.y + plot.height,
-          color: stroke,
-          opacity: areaOpacity,
-          curve
-        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.LineSeries, {
-          data,
-          points,
-          color: stroke,
-          strokeWidth,
-          curve,
-          showPoints,
-          bounds: size,
-          onDatumPress,
-          onDatumHoverIn,
-          onDatumHoverOut,
-          datumLabel: interactive ? function (datum) {
-            return (0, import_accessibility.describeDatum)({
-              datum,
-              formatValue: valueFormatter
-            });
-          } : void 0
-        }), showXAxis ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.XAxis, {
-          plot,
-          scale: xScale,
-          tickValues: (0, import_composeChart.thinCategories)(data.map(function (datum) {
+          }),
+          fontSize: labelFontSize
+        });
+        if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
+        var xScale = (0, import_math.createPointScale)({
+          domain: data.map(function (datum) {
             return datum.label;
-          }), plot.width, labelFontSize)
-        }) : null]
-      });
-    }
+          }),
+          range: [plot.x, plot.x + plot.width],
+          padding: 0.5
+        });
+        var yScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [plot.y + plot.height, plot.y]
+        });
+        var points = data.map(function (datum) {
+          var _xScale;
+          return {
+            x: (_xScale = xScale(datum.label)) !== null && _xScale !== void 0 ? _xScale : plot.x,
+            y: yScale(datum.value)
+          };
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [showYAxis || showGrid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.YAxis, {
+            plot,
+            scale: yScale,
+            ticks: yTicks,
+            tickFormat: function tickFormat(value) {
+              return format(value);
+            },
+            showLabels: showYAxis,
+            showGrid
+          }) : null, showArea ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.AreaSeries, {
+            points,
+            baseline: plot.y + plot.height,
+            color: stroke,
+            opacity: areaOpacity,
+            curve
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.LineSeries, {
+            data,
+            points,
+            color: stroke,
+            strokeWidth,
+            curve,
+            showPoints,
+            bounds: size,
+            onDatumPress,
+            onDatumHoverIn,
+            onDatumHoverOut,
+            datumLabel: interactive ? function (datum) {
+              return (0, import_accessibility.describeDatum)({
+                datum,
+                formatValue: valueFormatter
+              });
+            } : void 0
+          }), showXAxis ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.XAxis, {
+            plot,
+            scale: xScale,
+            tickValues: (0, import_composeChart.thinCategories)(data.map(function (datum) {
+              return datum.label;
+            }), plot.width, labelFontSize)
+          }) : null]
+        });
+      }
+    })
   });
 }
 function AreaChart(props) {

package/dist/cjs/charts/LineChart.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","LineChart_exports","__export","AreaChart","LineChart","module","exports","import_jsx_runtime","require","import_i18n","import_Axis","import_ChartSurface","import_accessibility","import_composeChart","import_math","import_series","import_useChartTheme","param","data","height","width","color","showArea","areaOpacity","curve","showPoints","strokeWidth","showXAxis","showYAxis","showGrid","yTicks","valueFormatter","title","label","typeLabel","onDatumPress","onDatumHoverIn","onDatumHoverOut","stackProps","t","useTranslation","palette","labelFontSize","useChartTheme","stroke","single","format","formatChartValue","ariaLabel","describeChart","formatValue","interactive","Boolean","jsx","ChartSurface","children","size","domain","valueDomain","map","datum","marginScale","createLinearScale","range","tickValues","getLinearTicks","plot","computeCartesianPlot","yTickLabels","fontSize","length","xScale","createPointScale","x","padding","yScale","y","points","_xScale","jsxs","Fragment","YAxis","scale","ticks","tickFormat","showLabels","AreaSeries","baseline","opacity","LineSeries","bounds","datumLabel","describeDatum","XAxis","thinCategories","props"],"sources":["../../../src/charts/LineChart.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","LineChart_exports","__export","AreaChart","LineChart","module","exports","import_jsx_runtime","require","import_i18n","import_Axis","import_ChartDataView","import_ChartSurface","import_accessibility","import_composeChart","import_math","import_series","import_useChartTheme","param","data","height","width","color","showArea","areaOpacity","curve","showPoints","strokeWidth","showXAxis","showYAxis","showGrid","yTicks","valueFormatter","title","label","typeLabel","onDatumPress","onDatumHoverIn","onDatumHoverOut","stackProps","t","useTranslation","palette","labelFontSize","useChartTheme","stroke","single","format","formatChartValue","ariaLabel","describeChart","formatValue","interactive","Boolean","jsx","ChartDataFrame","children","ChartSurface","proof","kind","separated","datumText","datumValues","chartDatumText","datumCount","length","size","domain","valueDomain","map","datum","marginScale","createLinearScale","range","tickValues","getLinearTicks","plot","computeCartesianPlot","yTickLabels","fontSize","xScale","createPointScale","x","padding","yScale","y","points","_xScale","jsxs","Fragment","YAxis","scale","ticks","tickFormat","showLabels","AreaSeries","baseline","opacity","LineSeries","bounds","datumLabel","describeDatum","XAxis","thinCategories","props"],"sources":["../../../src/charts/LineChart.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/charts/PieChart.cjs

@@ -29,11 +29,13 @@ var import_theme = require("@multiplatform.one/theme");
 var import_i18n = require("../shared/i18n.cjs");
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.cjs");
+var import_ChartDataView = require("./ChartDataView.cjs");
 var import_ChartSurface = require("./ChartSurface.cjs");
 var import_accessibility = require("./accessibility.cjs");
 var import_composeChart = require("./composeChart.cjs");
 var import_math = require("./math.cjs");
 var import_series = require("./series.cjs");
+var import_svg = require("./svg.cjs");
 var import_useChartTheme = require("./useChartTheme.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const DEFAULT_DONUT_RATIO = 0.55;
@@ -41,7 +43,7 @@ function PieChart({
   data,
   height = 200,
   donut = false,
-  padAngle = 0,
+  padAngle,
   colors,
   showLegend = true,
   valueFormatter,
@@ -76,78 +78,101 @@ function PieChart({
   });
   const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
   const innerRatio = donut === false ? 0 : donut === true ? DEFAULT_DONUT_RATIO : Math.min(Math.max(donut, 0), 0.9);
-  return (
-    // LC-10: `flexShrink` + `minWidth 0` let a row parent (e.g. Card.Footer)
-    // constrain the chart below its intrinsic width — the wrap then stacks
-    // the legend under the pie instead of painting past the frame.
-    /* @__PURE__ */
-    (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      flexWrap: "wrap",
-      alignItems: "center",
-      flexShrink: 1,
-      minWidth: 0,
-      ...knobProps.gap,
-      ...stackProps,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-        width: height,
+  const chart =
+  // LC-10: `flexShrink` + `minWidth 0` let a row parent (e.g. Card.Footer)
+  // constrain the chart below its intrinsic width — the wrap then stacks
+  // the legend under the pie instead of painting past the frame.
+  /* @__PURE__ */
+  (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    flexWrap: "wrap",
+    alignItems: "center",
+    flexShrink: 1,
+    minWidth: 0,
+    ...knobProps.gap,
+    ...(0, import_svg.chartWebProps)({
+      "data-mpo-chart-owner": "true"
+    }),
+    ...stackProps,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      width: height,
+      height,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
+        label: ariaLabel,
+        proof: {
+          kind: innerRatio > 0 ? "donut" : "pie",
+          separated: padAngle === void 0 ? (0, import_math.canMaskPieSlices)((0, import_math.pieSlices)(data), height / 2 * innerRatio, height / 2) : padAngle > 0,
+          datumText: showLegend,
+          datumValues: (0, import_accessibility.chartDatumText)(data, valueFormatter),
+          datumCount: data.length
+        },
         height,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
-          label: ariaLabel,
-          height,
-          width: height,
-          children: size => {
-            const outerRadius = Math.min(size.width, size.height) / 2;
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.PieSeries, {
-              data,
-              cx: size.width / 2,
-              cy: size.height / 2,
-              outerRadius,
-              innerRadius: outerRadius * innerRatio,
-              padAngle,
-              fills,
-              onDatumPress,
-              onDatumHoverIn,
-              onDatumHoverOut,
-              datumLabel: interactive ? datum => (0, import_accessibility.describeDatum)({
-                datum,
-                total,
-                formatValue: valueFormatter
-              }) : void 0
-            });
-          }
-        })
-      }), showLegend ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-        flex: 1,
-        minWidth: 140,
-        justifyContent: "center",
+        width: height,
+        children: size => {
+          const outerRadius = Math.min(size.width, size.height) / 2;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.PieSeries, {
+            data,
+            cx: size.width / 2,
+            cy: size.height / 2,
+            outerRadius,
+            innerRadius: outerRadius * innerRatio,
+            padAngle,
+            fills,
+            onDatumPress,
+            onDatumHoverIn,
+            onDatumHoverOut,
+            datumLabel: interactive ? datum => (0, import_accessibility.describeDatum)({
+              datum,
+              total,
+              formatValue: valueFormatter
+            }) : void 0
+          });
+        }
+      })
+    }), showLegend ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: 1,
+      minWidth: 140,
+      justifyContent: "center",
+      gap: "$2",
+      ...{
+        "data-pie-legend": "true"
+      },
+      children: data.map((datum, index) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...(0, import_svg.chartDatumTextProps)(index),
         gap: "$2",
-        ...{
-          "data-pie-legend": "true"
-        },
-        children: data.map((datum, index) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          gap: "$2",
-          alignItems: "center",
-          minWidth: 0,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-            width: 12,
-            height: 12,
-            borderRadius: knobProps.borderRadius.borderRadius,
-            flexShrink: 0,
-            backgroundColor: fills[index]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$2",
-            color: import_componentColors.componentColors.text.muted,
-            flex: 1,
-            numberOfLines: 1,
-            children: datum.label
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$2",
-            fontWeight: "500",
-            flexShrink: 0,
-            children: format(datum.value)
-          })]
-        }, `${datum.label}-${index}`))
-      }) : null]
-    })
-  );
+        alignItems: "center",
+        minWidth: 0,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          width: 12,
+          height: 12,
+          borderRadius: knobProps.borderRadius.borderRadius,
+          flexShrink: 0,
+          backgroundColor: fills[index]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...(0, import_svg.chartWebProps)({
+            "data-mpo-chart-datum-label": "true"
+          }),
+          ...knobProps.body,
+          fontSize: "$2",
+          color: import_componentColors.componentColors.text.muted,
+          flex: 1,
+          numberOfLines: 1,
+          children: datum.label
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...(0, import_svg.chartWebProps)({
+            "data-mpo-chart-datum-value": "true"
+          }),
+          ...knobProps.body,
+          fontSize: "$2",
+          flexShrink: 0,
+          children: format(datum.value)
+        })]
+      }, `${datum.label}-${index}`))
+    }) : null]
+  });
+  return showLegend ? chart : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartDataView.ChartDataFrame, {
+    data,
+    title,
+    valueFormatter,
+    children: chart
+  });
 }