@sproutsocial/seeds-react-data-viz 0.14.0 → 0.16.0

package/dist/esm/line-area/index.js

@@ -0,0 +1,151 @@
+import {
+  ChartRenderer,
+  buildAnnotationConfig,
+  buildBaseChartOptions,
+  buildDimensionalAxis,
+  defaultValueAxisLabelFormatter,
+  makeValueAxisLabelFormatter,
+  resolveTooltipTimezone,
+  useSeedsChartSetup
+} from "../chunk-ZXXFRUVF.js";
+import {
+  areaChartStyles,
+  lineChartStyles
+} from "../chunk-LC3HGWDD.js";
+
+// src/charts/line-area/LineAreaChart.tsx
+import { memo, useMemo } from "react";
+
+// src/charts/line-area/adapter.ts
+var AREA_VARIANTS = /* @__PURE__ */ new Set(["area", "areaspline"]);
+function pointY(point) {
+  if (point === null) return null;
+  if (typeof point === "number") return point;
+  if (Array.isArray(point)) return point[1];
+  return point.y;
+}
+function withIsolatedPointMarkers(data) {
+  return data.map((point, i) => {
+    if (point === null) return null;
+    if (pointY(point) === null) return point;
+    const prevY = i === 0 ? null : pointY(data[i - 1]);
+    const nextY = i === data.length - 1 ? null : pointY(data[i + 1]);
+    if (prevY !== null || nextY !== null) return point;
+    const marker = { enabled: true, symbol: "circle" };
+    if (typeof point === "number") return { y: point, marker };
+    if (Array.isArray(point)) return { x: point[0], y: point[1], marker };
+    return { ...point, marker };
+  });
+}
+function buildLineAreaChartOptions(props) {
+  const tooltipTimezone = resolveTooltipTimezone(props.xAxis, props.timezone);
+  const isStacked = AREA_VARIANTS.has(props.variant) && Boolean(props.stacking);
+  const { annotations, lookup: annotationLookup } = buildAnnotationConfig(
+    props.annotations
+  );
+  const options = {
+    ...buildBaseChartOptions({
+      type: props.variant,
+      description: props.description,
+      valueSuffix: props.valueSuffix,
+      reserveTopMargin: Boolean(annotations),
+      timezone: tooltipTimezone
+    }),
+    xAxis: buildDimensionalAxis(props.xAxis, tooltipTimezone ?? "UTC"),
+    yAxis: {
+      min: props.yAxis?.min,
+      max: props.yAxis?.max,
+      // Anchor the value axis to 0 (like v1/bar/area): line/spline otherwise
+      // auto-scale above 0, which truncates the axis and pushes the annotation
+      // anchor (y: 0) out of range. `soft` still extends for negative data.
+      softMin: 0,
+      softMax: 0,
+      gridLineWidth: props.yAxis?.showGridLines === false ? 0 : 1,
+      title: { text: props.yAxis?.title ?? "" },
+      // Zero-config default: abbreviate value-axis ticks (1.20K / 1.20M / 1.20B).
+      labels: {
+        // A declarative `format` drives ticks through the shared valueFormatter;
+        // absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).
+        formatter: props.yAxis?.format ? makeValueAxisLabelFormatter(props.yAxis.format) : defaultValueAxisLabelFormatter
+      }
+    },
+    plotOptions: {
+      series: {
+        animation: false,
+        // Hide point markers by default (matching v1 + designs); isolated points
+        // re-enable their own marker via `withIsolatedPointMarkers`.
+        marker: { enabled: false },
+        ...props.onClick ? {
+          point: {
+            events: {
+              click: (event) => props.onClick({ position: event.point.x })
+            }
+          }
+        } : {}
+      },
+      // Type-scoped stacking: only the (area) variant stacks. `isStacked` already
+      // guarantees `props.variant` is an area variant here, so the computed key is
+      // always a valid plotOptions slot. Matches bar's per-type placement and keeps
+      // line/spline unstacked.
+      ...isStacked ? { [props.variant]: { stacking: props.stacking } } : {}
+    },
+    series: props.series.map((s) => ({
+      type: props.variant,
+      name: s.name,
+      data: withIsolatedPointMarkers(s.data)
+    })),
+    ...annotations ? { annotations } : {}
+  };
+  return { options, annotationLookup, tooltipTimezone };
+}
+
+// src/charts/line-area/styles.ts
+import styled from "styled-components";
+var LineAreaChartContainer = styled.div`
+  background-color: ${({ theme }) => theme.colors.container.background.base};
+  ${(props) => props.$isArea ? areaChartStyles : lineChartStyles}
+`;
+
+// src/charts/line-area/LineAreaChart.tsx
+import { jsx } from "react/jsx-runtime";
+var AREA_VARIANTS2 = /* @__PURE__ */ new Set(["area", "areaspline"]);
+var LineAreaChart = memo(function LineAreaChart2(props) {
+  const { colors, patterns } = useSeedsChartSetup({
+    series: props.series,
+    includePatterns: true
+  });
+  const { options, annotationLookup, tooltipTimezone } = useMemo(
+    () => buildLineAreaChartOptions(props),
+    [props]
+  );
+  const hasOnClick = Boolean(props.onClick);
+  return /* @__PURE__ */ jsx(
+    LineAreaChartContainer,
+    {
+      $colors: colors,
+      $patterns: patterns,
+      $hasOnClick: hasOnClick,
+      $isArea: AREA_VARIANTS2.has(props.variant),
+      className: props.className,
+      children: /* @__PURE__ */ jsx(
+        ChartRenderer,
+        {
+          options,
+          series: props.series,
+          colors,
+          tooltip: props.tooltip,
+          annotationLookup,
+          hasOnClick,
+          tooltipClickLabel: props.tooltipClickLabel,
+          timezone: tooltipTimezone,
+          invalidNumberLabel: props.invalidNumberLabel,
+          onReady: props.onReady
+        }
+      )
+    }
+  );
+});
+export {
+  LineAreaChart
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/line-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/line-area/LineAreaChart.tsx","../../../src/charts/line-area/adapter.ts","../../../src/charts/line-area/styles.ts"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { useSeedsChartSetup, ChartRenderer } from \"../shared/chartBase\";\nimport { buildLineAreaChartOptions } from \"./adapter\";\nimport { LineAreaChartContainer } from \"./styles\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\nexport const LineAreaChart = memo(function LineAreaChart(\n  props: LineAreaChartProps\n) {\n  const { colors, patterns } = useSeedsChartSetup({\n    series: props.series,\n    includePatterns: true,\n  });\n  const { options, annotationLookup, tooltipTimezone } = useMemo(\n    () => buildLineAreaChartOptions(props),\n    [props]\n  );\n  const hasOnClick = Boolean(props.onClick);\n\n  return (\n    <LineAreaChartContainer\n      $colors={colors}\n      $patterns={patterns}\n      $hasOnClick={hasOnClick}\n      $isArea={AREA_VARIANTS.has(props.variant)}\n      className={props.className}\n    >\n      <ChartRenderer\n        options={options}\n        series={props.series}\n        colors={colors}\n        tooltip={props.tooltip}\n        annotationLookup={annotationLookup}\n        hasOnClick={hasOnClick}\n        tooltipClickLabel={props.tooltipClickLabel}\n        timezone={tooltipTimezone}\n        invalidNumberLabel={props.invalidNumberLabel}\n        onReady={props.onReady}\n      />\n    </LineAreaChartContainer>\n  );\n});\n","import { buildAnnotationConfig } from \"../shared/annotations\";\nimport type { ChartAnnotationLookup } from \"../shared/annotations\";\nimport type {\n  SeedsChartDataPoint,\n  SeedsChartOptions,\n} from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport {\n  buildDimensionalAxis,\n  resolveTooltipTimezone,\n} from \"../shared/axisOptions\";\nimport {\n  defaultValueAxisLabelFormatter,\n  makeValueAxisLabelFormatter,\n} from \"../shared/valueAxisLabelFormatter\";\nimport type { ChartDataPoint } from \"../shared/axis\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\n// `stacking` is meaningful only for filled variants; on `line`/`spline` it's a\n// no-op, so the adapter drops it rather than emitting a misleading option.\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\ntype SeriesPoint =\n  | number\n  | null\n  | [number, number | null]\n  | SeedsChartDataPoint;\n\nfunction pointY(point: ChartDataPoint): number | null {\n  if (point === null) return null;\n  if (typeof point === \"number\") return point;\n  if (Array.isArray(point)) return point[1];\n  return point.y;\n}\n\n// Mirrors v1's marker handling: point markers are hidden by default (set on\n// `plotOptions.series`), but an *isolated* non-null point — one with a null (or\n// the chart edge) on both sides — gets a circle marker so a point with no\n// connecting line segment stays visible. Connected points pass through\n// unchanged so the line/area renders dot-free, matching v1 and the designs.\nfunction withIsolatedPointMarkers(\n  data: ReadonlyArray<ChartDataPoint>\n): SeriesPoint[] {\n  return data.map((point, i): SeriesPoint => {\n    if (point === null) return null; // explicit gap\n    if (pointY(point) === null) return point; // tuple/object with null y — a gap\n    const prevY = i === 0 ? null : pointY(data[i - 1]!);\n    const nextY = i === data.length - 1 ? null : pointY(data[i + 1]!);\n    if (prevY !== null || nextY !== null) return point; // connected → no marker\n    const marker = { enabled: true, symbol: \"circle\" as const };\n    if (typeof point === \"number\") return { y: point, marker };\n    if (Array.isArray(point)) return { x: point[0], y: point[1], marker };\n    return { ...point, marker };\n  });\n}\n\nexport function buildLineAreaChartOptions(props: LineAreaChartProps): {\n  options: SeedsChartOptions;\n  annotationLookup: ChartAnnotationLookup | undefined;\n  /** Resolved timezone for the tooltip date formatter; undefined on category axes. */\n  tooltipTimezone: string | undefined;\n} {\n  const tooltipTimezone = resolveTooltipTimezone(props.xAxis, props.timezone);\n  const isStacked = AREA_VARIANTS.has(props.variant) && Boolean(props.stacking);\n  const { annotations, lookup: annotationLookup } = buildAnnotationConfig(\n    props.annotations\n  );\n\n  const options: SeedsChartOptions = {\n    ...buildBaseChartOptions({\n      type: props.variant,\n      description: props.description,\n      valueSuffix: props.valueSuffix,\n      reserveTopMargin: Boolean(annotations),\n      timezone: tooltipTimezone,\n    }),\n    xAxis: buildDimensionalAxis(props.xAxis, tooltipTimezone ?? \"UTC\"),\n    yAxis: {\n      min: props.yAxis?.min,\n      max: props.yAxis?.max,\n      // Anchor the value axis to 0 (like v1/bar/area): line/spline otherwise\n      // auto-scale above 0, which truncates the axis and pushes the annotation\n      // anchor (y: 0) out of range. `soft` still extends for negative data.\n      softMin: 0,\n      softMax: 0,\n      gridLineWidth: props.yAxis?.showGridLines === false ? 0 : 1,\n      title: { text: props.yAxis?.title ?? \"\" },\n      // Zero-config default: abbreviate value-axis ticks (1.20K / 1.20M / 1.20B).\n      labels: {\n        // A declarative `format` drives ticks through the shared valueFormatter;\n        // absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).\n        formatter: props.yAxis?.format\n          ? makeValueAxisLabelFormatter(props.yAxis.format)\n          : defaultValueAxisLabelFormatter,\n      },\n    },\n    plotOptions: {\n      series: {\n        animation: false,\n        // Hide point markers by default (matching v1 + designs); isolated points\n        // re-enable their own marker via `withIsolatedPointMarkers`.\n        marker: { enabled: false },\n        ...(props.onClick\n          ? {\n              point: {\n                events: {\n                  click: (event) => props.onClick!({ position: event.point.x }),\n                },\n              },\n            }\n          : {}),\n      },\n      // Type-scoped stacking: only the (area) variant stacks. `isStacked` already\n      // guarantees `props.variant` is an area variant here, so the computed key is\n      // always a valid plotOptions slot. Matches bar's per-type placement and keeps\n      // line/spline unstacked.\n      ...(isStacked ? { [props.variant]: { stacking: props.stacking } } : {}),\n    },\n    series: props.series.map((s) => ({\n      type: props.variant,\n      name: s.name,\n      data: withIsolatedPointMarkers(s.data),\n    })),\n    ...(annotations ? { annotations } : {}),\n  };\n\n  return { options, annotationLookup, tooltipTimezone };\n}\n","import styled from \"styled-components\";\nimport { lineChartStyles, areaChartStyles } from \"../../styles/chartStyles\";\nimport type {\n  TypeChartStyleColor,\n  TypeChartStyleHasOnClick,\n  TypeChartStylePattern,\n} from \"../../types\";\n\ntype StyleProps = Readonly<{\n  $colors: ReadonlyArray<TypeChartStyleColor>;\n  $patterns: ReadonlyArray<TypeChartStylePattern>;\n  $hasOnClick: TypeChartStyleHasOnClick;\n  /** `area`/`areaspline` fill below the line; `line`/`spline` show only the stroke. */\n  $isArea: boolean;\n}>;\n\n// Plain styled `div` — not `Box`. Per the DS Tailwind direction, components\n// render semantic elements internally (and accept `className`) rather than\n// depending on the `Box` component. The container background — previously Box's\n// `bg` prop — is set explicitly here.\n//\n// The line/area CSS is still v1's styled-components layer (`chartStyles.ts`);\n// migrating those styles to CSS modules is a tracked clean-up follow-up.\nexport const LineAreaChartContainer = styled.div<StyleProps>`\n  background-color: ${({ theme }) => theme.colors.container.background.base};\n  ${(props) => (props.$isArea ? areaChartStyles : lineChartStyles)}\n`;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,MAAM,eAAe;;;ACoB9B,IAAM,gBAAgB,oBAAI,IAAqB,CAAC,QAAQ,YAAY,CAAC;AAQrE,SAAS,OAAO,OAAsC;AACpD,MAAI,UAAU,KAAM,QAAO;AAC3B,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,MAAM,CAAC;AACxC,SAAO,MAAM;AACf;AAOA,SAAS,yBACP,MACe;AACf,SAAO,KAAK,IAAI,CAAC,OAAO,MAAmB;AACzC,QAAI,UAAU,KAAM,QAAO;AAC3B,QAAI,OAAO,KAAK,MAAM,KAAM,QAAO;AACnC,UAAM,QAAQ,MAAM,IAAI,OAAO,OAAO,KAAK,IAAI,CAAC,CAAE;AAClD,UAAM,QAAQ,MAAM,KAAK,SAAS,IAAI,OAAO,OAAO,KAAK,IAAI,CAAC,CAAE;AAChE,QAAI,UAAU,QAAQ,UAAU,KAAM,QAAO;AAC7C,UAAM,SAAS,EAAE,SAAS,MAAM,QAAQ,SAAkB;AAC1D,QAAI,OAAO,UAAU,SAAU,QAAO,EAAE,GAAG,OAAO,OAAO;AACzD,QAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,OAAO;AACpE,WAAO,EAAE,GAAG,OAAO,OAAO;AAAA,EAC5B,CAAC;AACH;AAEO,SAAS,0BAA0B,OAKxC;AACA,QAAM,kBAAkB,uBAAuB,MAAM,OAAO,MAAM,QAAQ;AAC1E,QAAM,YAAY,cAAc,IAAI,MAAM,OAAO,KAAK,QAAQ,MAAM,QAAQ;AAC5E,QAAM,EAAE,aAAa,QAAQ,iBAAiB,IAAI;AAAA,IAChD,MAAM;AAAA,EACR;AAEA,QAAM,UAA6B;AAAA,IACjC,GAAG,sBAAsB;AAAA,MACvB,MAAM,MAAM;AAAA,MACZ,aAAa,MAAM;AAAA,MACnB,aAAa,MAAM;AAAA,MACnB,kBAAkB,QAAQ,WAAW;AAAA,MACrC,UAAU;AAAA,IACZ,CAAC;AAAA,IACD,OAAO,qBAAqB,MAAM,OAAO,mBAAmB,KAAK;AAAA,IACjE,OAAO;AAAA,MACL,KAAK,MAAM,OAAO;AAAA,MAClB,KAAK,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA,MAIlB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,eAAe,MAAM,OAAO,kBAAkB,QAAQ,IAAI;AAAA,MAC1D,OAAO,EAAE,MAAM,MAAM,OAAO,SAAS,GAAG;AAAA;AAAA,MAExC,QAAQ;AAAA;AAAA;AAAA,QAGN,WAAW,MAAM,OAAO,SACpB,4BAA4B,MAAM,MAAM,MAAM,IAC9C;AAAA,MACN;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,QAAQ;AAAA,QACN,WAAW;AAAA;AAAA;AAAA,QAGX,QAAQ,EAAE,SAAS,MAAM;AAAA,QACzB,GAAI,MAAM,UACN;AAAA,UACE,OAAO;AAAA,YACL,QAAQ;AAAA,cACN,OAAO,CAAC,UAAU,MAAM,QAAS,EAAE,UAAU,MAAM,MAAM,EAAE,CAAC;AAAA,YAC9D;AAAA,UACF;AAAA,QACF,IACA,CAAC;AAAA,MACP;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,GAAI,YAAY,EAAE,CAAC,MAAM,OAAO,GAAG,EAAE,UAAU,MAAM,SAAS,EAAE,IAAI,CAAC;AAAA,IACvE;AAAA,IACA,QAAQ,MAAM,OAAO,IAAI,CAAC,OAAO;AAAA,MAC/B,MAAM,MAAM;AAAA,MACZ,MAAM,EAAE;AAAA,MACR,MAAM,yBAAyB,EAAE,IAAI;AAAA,IACvC,EAAE;AAAA,IACF,GAAI,cAAc,EAAE,YAAY,IAAI,CAAC;AAAA,EACvC;AAEA,SAAO,EAAE,SAAS,kBAAkB,gBAAgB;AACtD;;;AC/HA,OAAO,YAAY;AAuBZ,IAAM,yBAAyB,OAAO;AAAA,sBACvB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,IACvE,CAAC,UAAW,MAAM,UAAU,kBAAkB,eAAgB;AAAA;;;AFI5D;AAvBN,IAAMA,iBAAgB,oBAAI,IAAqB,CAAC,QAAQ,YAAY,CAAC;AAE9D,IAAM,gBAAgB,KAAK,SAASC,eACzC,OACA;AACA,QAAM,EAAE,QAAQ,SAAS,IAAI,mBAAmB;AAAA,IAC9C,QAAQ,MAAM;AAAA,IACd,iBAAiB;AAAA,EACnB,CAAC;AACD,QAAM,EAAE,SAAS,kBAAkB,gBAAgB,IAAI;AAAA,IACrD,MAAM,0BAA0B,KAAK;AAAA,IACrC,CAAC,KAAK;AAAA,EACR;AACA,QAAM,aAAa,QAAQ,MAAM,OAAO;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa;AAAA,MACb,SAASD,eAAc,IAAI,MAAM,OAAO;AAAA,MACxC,WAAW,MAAM;AAAA,MAEjB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,QAAQ,MAAM;AAAA,UACd;AAAA,UACA,SAAS,MAAM;AAAA,UACf;AAAA,UACA;AAAA,UACA,mBAAmB,MAAM;AAAA,UACzB,UAAU;AAAA,UACV,oBAAoB,MAAM;AAAA,UAC1B,SAAS,MAAM;AAAA;AAAA,MACjB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["AREA_VARIANTS","LineAreaChart"]}

package/dist/index.d.mts

@@ -37,6 +37,19 @@ type TypeAreaChartProps = Readonly<{
     timezone?: string;
     xAnnotations?: TypeChartXAnnotations;
 }>;
+/**
+ * @deprecated Use the v2 component instead:
+ *
+ * ```ts
+ * import { LineAreaChart } from "@sproutsocial/seeds-react-data-viz/line-area";
+ * ```
+ *
+ * `LineAreaChart` (with `variant="area"` or `"areaspline"`) is built on the shared
+ * v2 chart base — see `charts/README.md` for the architecture. The v2 prop shape
+ * differs from this legacy component and v2 does not yet cover every legacy
+ * feature (locale-aware tooltips, currency/number formatters, area totals).
+ * Migrate when ready; Claude-assisted migration guidance lands with the CE-10 codemod.
+ */
 declare const AreaChart: react.NamedExoticComponent<Readonly<{
     data: ReadonlyArray<Readonly<{
         name: string;
@@ -278,6 +291,19 @@ type TypeLineChartProps = Readonly<{
         timeFormat?: string;
     }) => string;
 }>;
+/**
+ * @deprecated Use the v2 component instead:
+ *
+ * ```ts
+ * import { LineAreaChart } from "@sproutsocial/seeds-react-data-viz/line-area";
+ * ```
+ *
+ * `LineAreaChart` (with `variant="line"` or `"spline"`) is built on the shared
+ * v2 chart base — see `charts/README.md` for the architecture. The v2 prop shape
+ * differs from this legacy component and v2 does not yet cover every legacy
+ * feature (locale-aware tooltips, currency/number formatters). Migrate when ready;
+ * Claude-assisted migration guidance lands with the CE-9 codemod.
+ */
 declare const LineChart: react.NamedExoticComponent<Readonly<{
     data: ReadonlyArray<Readonly<{
         name: string;

package/dist/index.d.ts

@@ -37,6 +37,19 @@ type TypeAreaChartProps = Readonly<{
     timezone?: string;
     xAnnotations?: TypeChartXAnnotations;
 }>;
+/**
+ * @deprecated Use the v2 component instead:
+ *
+ * ```ts
+ * import { LineAreaChart } from "@sproutsocial/seeds-react-data-viz/line-area";
+ * ```
+ *
+ * `LineAreaChart` (with `variant="area"` or `"areaspline"`) is built on the shared
+ * v2 chart base — see `charts/README.md` for the architecture. The v2 prop shape
+ * differs from this legacy component and v2 does not yet cover every legacy
+ * feature (locale-aware tooltips, currency/number formatters, area totals).
+ * Migrate when ready; Claude-assisted migration guidance lands with the CE-10 codemod.
+ */
 declare const AreaChart: react.NamedExoticComponent<Readonly<{
     data: ReadonlyArray<Readonly<{
         name: string;
@@ -278,6 +291,19 @@ type TypeLineChartProps = Readonly<{
         timeFormat?: string;
     }) => string;
 }>;
+/**
+ * @deprecated Use the v2 component instead:
+ *
+ * ```ts
+ * import { LineAreaChart } from "@sproutsocial/seeds-react-data-viz/line-area";
+ * ```
+ *
+ * `LineAreaChart` (with `variant="line"` or `"spline"`) is built on the shared
+ * v2 chart base — see `charts/README.md` for the architecture. The v2 prop shape
+ * differs from this legacy component and v2 does not yet cover every legacy
+ * feature (locale-aware tooltips, currency/number formatters). Migrate when ready;
+ * Claude-assisted migration guidance lands with the CE-9 codemod.
+ */
 declare const LineChart: react.NamedExoticComponent<Readonly<{
     data: ReadonlyArray<Readonly<{
         name: string;