@sproutsocial/seeds-react-data-viz 0.16.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/annotations-CjFoRPXf.d.mts +20 -0
- package/dist/annotations-CjFoRPXf.d.ts +20 -0
- package/dist/axis-WOeYkTO1.d.mts +44 -0
- package/dist/axis-WOeYkTO1.d.ts +44 -0
- package/dist/bar/index.d.mts +4 -2
- package/dist/bar/index.d.ts +4 -2
- package/dist/bar/index.js +14 -10
- package/dist/bar/index.js.map +1 -1
- package/dist/{axis-PJwu5Xmo.d.ts → chartBase-C-l7yYGx.d.ts} +6 -60
- package/dist/{axis-DXzufRRj.d.mts → chartBase-Cn_5CUJi.d.mts} +6 -60
- package/dist/{chunk-XVV7PYQE.js → chunk-2K7PFHIM.js} +101 -254
- package/dist/chunk-2K7PFHIM.js.map +1 -0
- package/dist/chunk-6D7P3IOT.js +150 -0
- package/dist/chunk-6D7P3IOT.js.map +1 -0
- package/dist/chunk-CYQXUAJC.js +169 -0
- package/dist/chunk-CYQXUAJC.js.map +1 -0
- package/dist/chunk-VVGBJOFH.js +68 -0
- package/dist/chunk-VVGBJOFH.js.map +1 -0
- package/dist/{chunk-EEVKTTT3.js → chunk-WEKDYQ4T.js} +1 -1
- package/dist/chunk-WEKDYQ4T.js.map +1 -0
- package/dist/donut/index.d.mts +48 -0
- package/dist/donut/index.d.ts +48 -0
- package/dist/donut/index.js +125 -0
- package/dist/donut/index.js.map +1 -0
- package/dist/esm/bar/index.js +11 -7
- package/dist/esm/bar/index.js.map +1 -1
- package/dist/esm/chunk-AUJ3EWRH.js +68 -0
- package/dist/esm/chunk-AUJ3EWRH.js.map +1 -0
- package/dist/esm/{chunk-ZXXFRUVF.js → chunk-LPQXJJNT.js} +94 -247
- package/dist/esm/chunk-LPQXJJNT.js.map +1 -0
- package/dist/esm/chunk-NAKJY5PA.js +150 -0
- package/dist/esm/chunk-NAKJY5PA.js.map +1 -0
- package/dist/esm/chunk-XMYGML25.js +169 -0
- package/dist/esm/chunk-XMYGML25.js.map +1 -0
- package/dist/esm/{chunk-LC3HGWDD.js → chunk-Z4LOM4OZ.js} +1 -1
- package/dist/esm/chunk-Z4LOM4OZ.js.map +1 -0
- package/dist/esm/donut/index.js +125 -0
- package/dist/esm/donut/index.js.map +1 -0
- package/dist/esm/export/index.js.map +1 -1
- package/dist/esm/index.js +20 -164
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/line-area/index.js +12 -7
- package/dist/esm/line-area/index.js.map +1 -1
- package/dist/esm/sparkline/index.js +123 -0
- package/dist/esm/sparkline/index.js.map +1 -0
- package/dist/export/index.js.map +1 -1
- package/dist/index.d.mts +26 -23
- package/dist/index.d.ts +26 -23
- package/dist/index.js +113 -257
- package/dist/index.js.map +1 -1
- package/dist/line-area/index.d.mts +7 -4
- package/dist/line-area/index.d.ts +7 -4
- package/dist/line-area/index.js +15 -10
- package/dist/line-area/index.js.map +1 -1
- package/dist/sparkline/index.d.mts +75 -0
- package/dist/sparkline/index.d.ts +75 -0
- package/dist/sparkline/index.js +123 -0
- package/dist/sparkline/index.js.map +1 -0
- package/dist/sparkline.css +76 -0
- package/dist/{types-B7ILUQ6_.d.mts → types-DxrhdAdn.d.mts} +3 -3
- package/dist/{types-B7ILUQ6_.d.ts → types-DxrhdAdn.d.ts} +3 -3
- package/package.json +15 -3
- package/dist/chunk-EEVKTTT3.js.map +0 -1
- package/dist/chunk-XVV7PYQE.js.map +0 -1
- package/dist/esm/chunk-LC3HGWDD.js.map +0 -1
- package/dist/esm/chunk-ZXXFRUVF.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
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":"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","names":["AREA_VARIANTS","LineAreaChart"]}
|
|
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 valueFormat={props.yAxis?.format}\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":"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","names":["AREA_VARIANTS","LineAreaChart"]}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import {
|
|
2
|
+
buildDimensionalAxis,
|
|
3
|
+
resolveTooltipTimezone
|
|
4
|
+
} from "../chunk-NAKJY5PA.js";
|
|
5
|
+
import {
|
|
6
|
+
ChartRenderer,
|
|
7
|
+
buildBaseChartOptions
|
|
8
|
+
} from "../chunk-LPQXJJNT.js";
|
|
9
|
+
import "../chunk-Z4LOM4OZ.js";
|
|
10
|
+
|
|
11
|
+
// src/charts/sparkline/SparklineChart.tsx
|
|
12
|
+
import { memo } from "react";
|
|
13
|
+
import { useTheme } from "styled-components";
|
|
14
|
+
|
|
15
|
+
// src/charts/sparkline/adapter.ts
|
|
16
|
+
function highchartsType(variant) {
|
|
17
|
+
return variant === "bar" ? "column" : "line";
|
|
18
|
+
}
|
|
19
|
+
var SPARKLINE_SERIES_NAME = "sparkline";
|
|
20
|
+
function buildSparklineChartOptions(props) {
|
|
21
|
+
const type = highchartsType(props.variant);
|
|
22
|
+
const tooltipTimezone = props.xAxis ? resolveTooltipTimezone(props.xAxis, props.timezone) : void 0;
|
|
23
|
+
const xAxis = props.xAxis ? {
|
|
24
|
+
...buildDimensionalAxis(props.xAxis, tooltipTimezone ?? "UTC"),
|
|
25
|
+
visible: false
|
|
26
|
+
} : { type: "linear", visible: false };
|
|
27
|
+
const base = buildBaseChartOptions({
|
|
28
|
+
type,
|
|
29
|
+
description: props.description,
|
|
30
|
+
valueSuffix: props.valueSuffix,
|
|
31
|
+
timezone: tooltipTimezone
|
|
32
|
+
});
|
|
33
|
+
const options = {
|
|
34
|
+
...base,
|
|
35
|
+
// Zero the outer spacing so the plot fills the (consumer-sized) wrapper.
|
|
36
|
+
chart: { type, styledMode: true, animation: false, spacing: [0, 0, 0, 0] },
|
|
37
|
+
xAxis,
|
|
38
|
+
yAxis: { visible: false },
|
|
39
|
+
plotOptions: {
|
|
40
|
+
series: {
|
|
41
|
+
animation: false,
|
|
42
|
+
// Decorative micro-chart: no per-point markers on the line.
|
|
43
|
+
marker: { enabled: false }
|
|
44
|
+
},
|
|
45
|
+
// Tight padding so bars read as a compact cluster.
|
|
46
|
+
column: {
|
|
47
|
+
pointPadding: 0.05,
|
|
48
|
+
groupPadding: 0.05,
|
|
49
|
+
borderWidth: 0,
|
|
50
|
+
borderRadius: 3
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
series: [
|
|
54
|
+
{
|
|
55
|
+
type,
|
|
56
|
+
name: SPARKLINE_SERIES_NAME,
|
|
57
|
+
data: [...props.data]
|
|
58
|
+
}
|
|
59
|
+
]
|
|
60
|
+
};
|
|
61
|
+
return { options, tooltipTimezone };
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// src/charts/shared/trend.ts
|
|
65
|
+
function yValue(point) {
|
|
66
|
+
if (point == null) return null;
|
|
67
|
+
if (typeof point === "number") return point;
|
|
68
|
+
if (Array.isArray(point)) return point[1];
|
|
69
|
+
return point.y;
|
|
70
|
+
}
|
|
71
|
+
function computeTrend(data) {
|
|
72
|
+
const finite = data.map(yValue).filter((v) => v != null && Number.isFinite(v));
|
|
73
|
+
if (finite.length < 2) return "neutral";
|
|
74
|
+
const first = finite[0];
|
|
75
|
+
const last = finite[finite.length - 1];
|
|
76
|
+
if (last > first) return "positive";
|
|
77
|
+
if (last < first) return "negative";
|
|
78
|
+
return "neutral";
|
|
79
|
+
}
|
|
80
|
+
function resolveTrendColor(theme, trend) {
|
|
81
|
+
const decorative = theme.colors.container.border.decorative;
|
|
82
|
+
if (trend === "positive") return decorative.green;
|
|
83
|
+
if (trend === "negative") return decorative.red;
|
|
84
|
+
return decorative.neutral;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// src/charts/sparkline/SparklineChart.tsx
|
|
88
|
+
import { jsx } from "react/jsx-runtime";
|
|
89
|
+
var SparklineChart = memo(function SparklineChart2(props) {
|
|
90
|
+
const theme = useTheme();
|
|
91
|
+
const trend = computeTrend(props.data);
|
|
92
|
+
const trendColor = resolveTrendColor(theme, trend);
|
|
93
|
+
const { options, tooltipTimezone } = buildSparklineChartOptions(props);
|
|
94
|
+
const className = [
|
|
95
|
+
"seeds-sparkline",
|
|
96
|
+
`seeds-sparkline-${props.variant}`,
|
|
97
|
+
props.className
|
|
98
|
+
].filter(Boolean).join(" ");
|
|
99
|
+
return /* @__PURE__ */ jsx(
|
|
100
|
+
"div",
|
|
101
|
+
{
|
|
102
|
+
className,
|
|
103
|
+
style: { "--seeds-sparkline-color": trendColor },
|
|
104
|
+
children: /* @__PURE__ */ jsx(
|
|
105
|
+
ChartRenderer,
|
|
106
|
+
{
|
|
107
|
+
options,
|
|
108
|
+
series: [{ name: SPARKLINE_SERIES_NAME, color: trendColor }],
|
|
109
|
+
colors: [trendColor],
|
|
110
|
+
tooltip: props.tooltip,
|
|
111
|
+
timezone: tooltipTimezone,
|
|
112
|
+
invalidNumberLabel: props.invalidNumberLabel,
|
|
113
|
+
hideLegend: true,
|
|
114
|
+
onReady: props.onReady
|
|
115
|
+
}
|
|
116
|
+
)
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
});
|
|
120
|
+
export {
|
|
121
|
+
SparklineChart
|
|
122
|
+
};
|
|
123
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/charts/sparkline/SparklineChart.tsx","../../../src/charts/sparkline/adapter.ts","../../../src/charts/shared/trend.ts"],"sourcesContent":["import { memo, type CSSProperties } from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport { ChartRenderer } from \"../shared/chartBase\";\nimport { buildSparklineChartOptions, SPARKLINE_SERIES_NAME } from \"./adapter\";\nimport { computeTrend, resolveTrendColor } from \"./trend\";\nimport type { SparklineChartProps } from \"./types\";\n\n/**\n * SparklineChart — a compact, axis-less inline micro-chart in a `\"line\"` or\n * `\"bar\"` variant. The whole sparkline is colored by trend (auto-computed from\n * the data): green when rising, red when falling, neutral-gray when flat.\n *\n * Unlike the other v2 chart families this one carries no `styled-components`:\n * the wrapper is a plain `<div>` that accepts `className` (Tailwind sizing), and\n * the Highcharts styling lives in `sparkline.css`. Consumers must import\n * `@sproutsocial/seeds-react-data-viz/sparkline.css` once. The single trend\n * color is resolved from the JS theme and passed down as the\n * `--seeds-sparkline-color` CSS variable, so light/dark works without depending\n * on the theme's CSS-variable stylesheet.\n */\nexport const SparklineChart = memo(function SparklineChart(\n props: SparklineChartProps\n) {\n // The active theme resolves the single trend color. We read it directly rather\n // than via useSeedsChartSetup — the sparkline has no categorical palette or\n // series-limit concerns, so the hook's series machinery (and its dummy series\n // input) would be dead weight. ChartRenderer below is itself a styled-\n // component, so this adds no new dependency; the \"no styled-components\" trait\n // of this family is about the wrapper being a plain <div> + static CSS.\n const theme = useTheme() as TypeTheme;\n\n const trend = computeTrend(props.data);\n const trendColor = resolveTrendColor(theme, trend);\n\n const { options, tooltipTimezone } = buildSparklineChartOptions(props);\n\n const className = [\n \"seeds-sparkline\",\n `seeds-sparkline-${props.variant}`,\n props.className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <div\n className={className}\n style={{ \"--seeds-sparkline-color\": trendColor } as CSSProperties}\n >\n <ChartRenderer\n options={options}\n series={[{ name: SPARKLINE_SERIES_NAME, color: trendColor }]}\n colors={[trendColor]}\n tooltip={props.tooltip}\n timezone={tooltipTimezone}\n invalidNumberLabel={props.invalidNumberLabel}\n hideLegend\n onReady={props.onReady}\n />\n </div>\n );\n});\n","import type { SeedsChartOptions, SeedsChartType } from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport {\n buildDimensionalAxis,\n resolveTooltipTimezone,\n} from \"../shared/axisOptions\";\nimport type { SparklineChartProps, SparklineVariant } from \"./types\";\n\n// A sparkline line is a `line`; a sparkline bar is a `column` (vertical bars).\nfunction highchartsType(variant: SparklineVariant): SeedsChartType {\n return variant === \"bar\" ? \"column\" : \"line\";\n}\n\nconst SPARKLINE_SERIES_NAME = \"sparkline\";\n\nexport function buildSparklineChartOptions(props: SparklineChartProps): {\n options: SeedsChartOptions;\n /** Resolved timezone for the tooltip date formatter; undefined without a datetime axis. */\n tooltipTimezone: string | undefined;\n} {\n const type = highchartsType(props.variant);\n const tooltipTimezone = props.xAxis\n ? resolveTooltipTimezone(props.xAxis, props.timezone)\n : undefined;\n\n // A configured axis is placed but hidden (labels/line/ticks off). Without one\n // we fall back to a hidden linear index axis.\n const xAxis = props.xAxis\n ? {\n ...buildDimensionalAxis(props.xAxis, tooltipTimezone ?? \"UTC\"),\n visible: false,\n }\n : { type: \"linear\" as const, visible: false };\n\n const base = buildBaseChartOptions({\n type,\n description: props.description,\n valueSuffix: props.valueSuffix,\n timezone: tooltipTimezone,\n });\n\n const options: SeedsChartOptions = {\n ...base,\n // Zero the outer spacing so the plot fills the (consumer-sized) wrapper.\n chart: { type, styledMode: true, animation: false, spacing: [0, 0, 0, 0] },\n xAxis,\n yAxis: { visible: false },\n plotOptions: {\n series: {\n animation: false,\n // Decorative micro-chart: no per-point markers on the line.\n marker: { enabled: false },\n },\n // Tight padding so bars read as a compact cluster.\n column: {\n pointPadding: 0.05,\n groupPadding: 0.05,\n borderWidth: 0,\n borderRadius: 3,\n },\n },\n series: [\n {\n type,\n name: SPARKLINE_SERIES_NAME,\n data: [...props.data],\n },\n ],\n };\n\n return { options, tooltipTimezone };\n}\n\nexport { SPARKLINE_SERIES_NAME };\n","import type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport type { ChartDataPoint } from \"./axis\";\n\n// Family-agnostic trend helpers, shared across chart families. First used by the\n// sparkline (colored entirely by its trend direction); reusable by any chart\n// that wants a sentiment/directional color from a single series (e.g. a\n// sentiment chart).\n\n/**\n * Trend direction derived from a series (first vs. last finite value): rising →\n * `\"positive\"`, falling → `\"negative\"`, flat → `\"neutral\"`.\n */\nexport type Trend = \"positive\" | \"negative\" | \"neutral\";\n\n/** Extract the numeric y-value from a bare number, tuple, or `{ x, y }` point. */\nfunction yValue(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/**\n * Derive the trend from the series by comparing the first finite value to the\n * last finite value: rising → `\"positive\"`, falling → `\"negative\"`, equal (or\n * fewer than two finite values) → `\"neutral\"`.\n */\nexport function computeTrend(data: ReadonlyArray<ChartDataPoint>): Trend {\n const finite = data\n .map(yValue)\n .filter((v): v is number => v != null && Number.isFinite(v));\n\n if (finite.length < 2) return \"neutral\";\n\n const first = finite[0]!;\n const last = finite[finite.length - 1]!;\n\n if (last > first) return \"positive\";\n if (last < first) return \"negative\";\n return \"neutral\";\n}\n\n/**\n * Resolve the trend to a Seeds decorative highlight/accent color: positive →\n * vibrant green (green-500), negative → vibrant red (red-600), neutral → middle\n * gray (neutral-600). These highlight tones are theme-stable — the same value in\n * light and dark — and are designed to read as accents on either surface.\n */\nexport function resolveTrendColor(theme: TypeTheme, trend: Trend): string {\n const decorative = theme.colors.container.border.decorative;\n if (trend === \"positive\") return decorative.green;\n if (trend === \"negative\") return decorative.red;\n return decorative.neutral;\n}\n"],"mappings":"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","names":["SparklineChart"]}
|
package/dist/export/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/export/index.js","../../src/export/ChartExportMenu.tsx"],"names":[],"mappings":"AAAA;ACAA,2DAAqC;AACrC,oEAAuB;AACvB,gEAAqB;AAiDX,+CAAA;AA5BV,IAAM,MAAA,EAA6B,CAAC,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,KAAK,CAAA;AAG9D,IAAM,OAAA,EAA6D;AAAA,EACjE,GAAA,EAAK,WAAA;AAAA,EACL,GAAA,EAAK,WAAA;AAAA,EACL,GAAA,EAAK,WAAA;AAAA,EACL,GAAA,EAAK;AACP,CAAA;AAQO,SAAS,eAAA,CAAgB;AAAA,EAC9B,YAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,QAAA,EAAU,KAAA,CAAM,MAAA,CAAO,CAAC,MAAA,EAAA,GAAW,MAAA,CAAO,MAAM,CAAC,CAAA;AACvD,EAAA,GAAA,CAAI,OAAA,CAAQ,OAAA,IAAW,CAAA,EAAG,OAAO,IAAA;AAEjC,EAAA,uBACE,6BAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,OAAA,kBACE,6BAAA,wBAAC,EAAA,EAAO,UAAA,EAAW,WAAA,EAAY,SAAA,EAAW,gBAAA,EACxC,QAAA,kBAAA,6BAAA,oBAAC,EAAA,EAAK,IAAA,EAAK,+BAAA,EAAgC,UAAA,EAAU,IAAA,EAAC,aAAA,EAAW,KAAA,CAAC,EAAA,CACpE,CAAA;AAAA,MAGD,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,EAAA,mBACZ,6BAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UAEC,OAAA,EAAS,CAAA,EAAA,GAAM;AAKb,YAAA,KAAK,YAAA,CAAa,MAAA,CAAO,MAAM,CAAC,CAAA,CAAE,CAAA,CAAE,KAAA,CAAM,CAAA,EAAA,GAAM;AAAA,
|
|
1
|
+
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/export/index.js","../../src/export/ChartExportMenu.tsx"],"names":[],"mappings":"AAAA;ACAA,2DAAqC;AACrC,oEAAuB;AACvB,gEAAqB;AAiDX,+CAAA;AA5BV,IAAM,MAAA,EAA6B,CAAC,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,KAAK,CAAA;AAG9D,IAAM,OAAA,EAA6D;AAAA,EACjE,GAAA,EAAK,WAAA;AAAA,EACL,GAAA,EAAK,WAAA;AAAA,EACL,GAAA,EAAK,WAAA;AAAA,EACL,GAAA,EAAK;AACP,CAAA;AAQO,SAAS,eAAA,CAAgB;AAAA,EAC9B,YAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,QAAA,EAAU,KAAA,CAAM,MAAA,CAAO,CAAC,MAAA,EAAA,GAAW,MAAA,CAAO,MAAM,CAAC,CAAA;AACvD,EAAA,GAAA,CAAI,OAAA,CAAQ,OAAA,IAAW,CAAA,EAAG,OAAO,IAAA;AAEjC,EAAA,uBACE,6BAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,OAAA,kBACE,6BAAA,wBAAC,EAAA,EAAO,UAAA,EAAW,WAAA,EAAY,SAAA,EAAW,gBAAA,EACxC,QAAA,kBAAA,6BAAA,oBAAC,EAAA,EAAK,IAAA,EAAK,+BAAA,EAAgC,UAAA,EAAU,IAAA,EAAC,aAAA,EAAW,KAAA,CAAC,EAAA,CACpE,CAAA;AAAA,MAGD,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,EAAA,mBACZ,6BAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UAEC,OAAA,EAAS,CAAA,EAAA,GAAM;AAKb,YAAA,KAAK,YAAA,CAAa,MAAA,CAAO,MAAM,CAAC,CAAA,CAAE,CAAA,CAAE,KAAA,CAAM,CAAA,EAAA,GAAM;AAAA,YAEhD,CAAC,CAAA;AAAA,UACH,CAAA;AAAA,UAEC,QAAA,EAAA,MAAA,CAAO,MAAM;AAAA,QAAA,CAAA;AAAA,QAXT;AAAA,MAYP,CACD;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ;ADpCA;AACE;AACF,0CAAC","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/export/index.js","sourcesContent":[null,"import { ActionMenu, MenuItem } from \"@sproutsocial/seeds-react-menu/base\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type {\n ChartExportFormat,\n ChartExportHandle,\n} from \"../charts/shared/chartExport\";\n\nexport interface ChartExportMenuProps {\n /** The opaque export handle surfaced by a v2 chart's `onReady` callback. */\n exportHandle: ChartExportHandle;\n /**\n * Visible labels per format. Only formats with a non-empty label render an\n * item; an empty object (or all-falsy labels) renders nothing — no dead\n * trigger. Items always render in canonical order, never in key-insertion\n * order.\n */\n labels: Partial<Record<ChartExportFormat, string>>;\n /** Accessible name for the icon-only trigger button. */\n triggerAriaLabel: string;\n}\n\n// Canonical render order, independent of `labels` key order.\nconst ORDER: ChartExportFormat[] = [\"png\", \"svg\", \"pdf\", \"csv\"];\n\n// Maps each format to the matching handle callable.\nconst METHOD: Record<ChartExportFormat, keyof ChartExportHandle> = {\n png: \"exportPNG\",\n svg: \"exportSVG\",\n pdf: \"exportPDF\",\n csv: \"exportCSV\",\n};\n\n/**\n * Icon-only overflow button that opens a dropdown of chart export actions\n * (PNG/SVG/PDF/CSV) for greenfield consumers, so they don't have to wire up\n * their own menu around the `ChartExportHandle` from `onReady`. Consumes only\n * the opaque handle — no Highcharts type crosses this boundary.\n */\nexport function ChartExportMenu({\n exportHandle,\n labels,\n triggerAriaLabel,\n}: ChartExportMenuProps) {\n const formats = ORDER.filter((format) => labels[format]);\n if (formats.length === 0) return null;\n\n return (\n <ActionMenu\n trigger={\n <Button appearance=\"secondary\" ariaLabel={triggerAriaLabel}>\n <Icon name=\"arrow-down-to-bracket-outline\" fixedWidth aria-hidden />\n </Button>\n }\n >\n {formats.map((format) => (\n <MenuItem\n key={format}\n onClick={() => {\n // The handle is fire-and-forget by design (opaque, consumer owns no\n // UI here). Attach a no-op catch so a rejected export (e.g. a PDF\n // dynamic-import failure) is a deliberate swallow, not an unhandled\n // promise rejection.\n void exportHandle[METHOD[format]]().catch(() => {\n // no-op: deliberate swallow of fire-and-forget export rejection (see comment above)\n });\n }}\n >\n {labels[format]}\n </MenuItem>\n ))}\n </ActionMenu>\n );\n}\n"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import { T as TypeChartDataPoint, a as TypeChartDataStyles, b as TypeChartTooltipDateFormatter, c as TypeChartNumberFormat, d as TypeChartTooltipProps, e as TypeChartYAxisLabelFormatter, f as TypeChartTimeFormat, g as TypeChartXAnnotations, h as TypeChartStylePattern, i as TypeVerticalBarChartProps, j as TypeSeriesType, E as ExtendedTimeTicksInfoObject, k as TypeChartStyleColor, l as TypeChartStyleHasOnClick } from './types-
|
|
4
|
-
export { m as ExtendedAxisLabelsFormatterContextObject, n as TypeChartXAnnotationsDetails, o as TypeExtendedChart } from './types-
|
|
3
|
+
import { T as TypeChartDataPoint, a as TypeChartDataStyles, b as TypeChartTooltipDateFormatter, c as TypeChartNumberFormat, d as TypeChartTooltipProps, e as TypeChartYAxisLabelFormatter, f as TypeChartTimeFormat, g as TypeChartXAnnotations, h as TypeChartStylePattern, i as TypeVerticalBarChartProps, j as TypeSeriesType, E as ExtendedTimeTicksInfoObject, k as TypeChartStyleColor, l as TypeChartStyleHasOnClick } from './types-DxrhdAdn.mjs';
|
|
4
|
+
export { m as ExtendedAxisLabelsFormatterContextObject, n as TypeChartXAnnotationsDetails, o as TypeExtendedChart } from './types-DxrhdAdn.mjs';
|
|
5
5
|
import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
|
|
6
6
|
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
7
7
|
import { Table } from '@sproutsocial/seeds-react-table';
|
|
@@ -25,11 +25,11 @@ type TypeAreaChartProps = Readonly<{
|
|
|
25
25
|
currency?: string;
|
|
26
26
|
disableTooltips?: boolean;
|
|
27
27
|
numberFormat?: TypeChartNumberFormat;
|
|
28
|
-
tooltip?: (
|
|
28
|
+
tooltip?: (_props: TypeChartTooltipProps & Readonly<{
|
|
29
29
|
total: number | null;
|
|
30
30
|
}>) => ReactNode;
|
|
31
31
|
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
32
|
-
onClick?: (
|
|
32
|
+
onClick?: (_props: Readonly<{
|
|
33
33
|
x: number;
|
|
34
34
|
}>) => void;
|
|
35
35
|
tooltipClickLabel?: ReactNode;
|
|
@@ -65,11 +65,11 @@ declare const AreaChart: react.NamedExoticComponent<Readonly<{
|
|
|
65
65
|
currency?: string;
|
|
66
66
|
disableTooltips?: boolean;
|
|
67
67
|
numberFormat?: TypeChartNumberFormat;
|
|
68
|
-
tooltip?: (
|
|
68
|
+
tooltip?: (_props: TypeChartTooltipProps & Readonly<{
|
|
69
69
|
total: number | null;
|
|
70
70
|
}>) => ReactNode;
|
|
71
71
|
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
72
|
-
onClick?: (
|
|
72
|
+
onClick?: (_props: Readonly<{
|
|
73
73
|
x: number;
|
|
74
74
|
}>) => void;
|
|
75
75
|
tooltipClickLabel?: ReactNode;
|
|
@@ -142,7 +142,7 @@ declare const ChartTooltipHeader: react.NamedExoticComponent<TypeChartTooltipHea
|
|
|
142
142
|
declare const generateChartTooltipPortalId: (chartId: number) => string;
|
|
143
143
|
declare const ChartTooltipPortal: react.NamedExoticComponent<Readonly<{
|
|
144
144
|
chart: Chart;
|
|
145
|
-
renderContent: (
|
|
145
|
+
renderContent: (_context: TooltipFormatterContextObject) => ReactNode;
|
|
146
146
|
}>>;
|
|
147
147
|
|
|
148
148
|
type TypeChartTooltipTableProps = {
|
|
@@ -220,12 +220,15 @@ type TypeDonutChartProps = Readonly<{
|
|
|
220
220
|
disableTooltips?: boolean;
|
|
221
221
|
hideLegend?: boolean;
|
|
222
222
|
numberFormat?: TypeChartNumberFormat;
|
|
223
|
-
tooltip?: (
|
|
224
|
-
onClick?: (
|
|
223
|
+
tooltip?: (_props: TypeDonutChartTooltipProps) => ReactNode;
|
|
224
|
+
onClick?: (_props: Readonly<{
|
|
225
225
|
x: string;
|
|
226
226
|
} & TypeDonutChartDataItem>) => void;
|
|
227
227
|
tooltipClickLabel?: ReactNode;
|
|
228
228
|
}>;
|
|
229
|
+
/**
|
|
230
|
+
* @deprecated Use `DonutChart` from `@sproutsocial/seeds-react-data-viz/donut` instead.
|
|
231
|
+
*/
|
|
229
232
|
declare const DonutChart: react.NamedExoticComponent<Readonly<{
|
|
230
233
|
data: ReadonlyArray<TypeDonutChartDataItem>;
|
|
231
234
|
numberLocale: Intl.LocalesArgument;
|
|
@@ -234,8 +237,8 @@ declare const DonutChart: react.NamedExoticComponent<Readonly<{
|
|
|
234
237
|
disableTooltips?: boolean;
|
|
235
238
|
hideLegend?: boolean;
|
|
236
239
|
numberFormat?: TypeChartNumberFormat;
|
|
237
|
-
tooltip?: (
|
|
238
|
-
onClick?: (
|
|
240
|
+
tooltip?: (_props: TypeDonutChartTooltipProps) => ReactNode;
|
|
241
|
+
onClick?: (_props: Readonly<{
|
|
239
242
|
x: string;
|
|
240
243
|
} & TypeDonutChartDataItem>) => void;
|
|
241
244
|
tooltipClickLabel?: ReactNode;
|
|
@@ -274,16 +277,16 @@ type TypeLineChartProps = Readonly<{
|
|
|
274
277
|
currency?: string;
|
|
275
278
|
disableTooltips?: boolean;
|
|
276
279
|
numberFormat?: TypeChartNumberFormat;
|
|
277
|
-
tooltip?: (
|
|
280
|
+
tooltip?: (_props: TypeChartTooltipProps) => ReactNode;
|
|
278
281
|
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
279
|
-
onClick?: (
|
|
282
|
+
onClick?: (_props: Readonly<{
|
|
280
283
|
x: number;
|
|
281
284
|
}>) => void;
|
|
282
285
|
tooltipClickLabel?: ReactNode;
|
|
283
286
|
timeFormat?: TypeChartTimeFormat;
|
|
284
287
|
timezone?: string;
|
|
285
288
|
xAnnotations?: TypeChartXAnnotations;
|
|
286
|
-
xAxisLabelFormatter?: (
|
|
289
|
+
xAxisLabelFormatter?: (_params: {
|
|
287
290
|
textLocale: Intl.LocalesArgument;
|
|
288
291
|
tickPositions: number[];
|
|
289
292
|
unitName: string;
|
|
@@ -320,16 +323,16 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
|
|
|
320
323
|
currency?: string;
|
|
321
324
|
disableTooltips?: boolean;
|
|
322
325
|
numberFormat?: TypeChartNumberFormat;
|
|
323
|
-
tooltip?: (
|
|
326
|
+
tooltip?: (_props: TypeChartTooltipProps) => ReactNode;
|
|
324
327
|
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
325
|
-
onClick?: (
|
|
328
|
+
onClick?: (_props: Readonly<{
|
|
326
329
|
x: number;
|
|
327
330
|
}>) => void;
|
|
328
331
|
tooltipClickLabel?: ReactNode;
|
|
329
332
|
timeFormat?: TypeChartTimeFormat;
|
|
330
333
|
timezone?: string;
|
|
331
334
|
xAnnotations?: TypeChartXAnnotations;
|
|
332
|
-
xAxisLabelFormatter?: (
|
|
335
|
+
xAxisLabelFormatter?: (_params: {
|
|
333
336
|
textLocale: Intl.LocalesArgument;
|
|
334
337
|
tickPositions: number[];
|
|
335
338
|
unitName: string;
|
|
@@ -358,12 +361,12 @@ declare const VerticalBarChart: react.NamedExoticComponent<Readonly<{
|
|
|
358
361
|
data: ReadonlyArray<Readonly<{
|
|
359
362
|
name: string;
|
|
360
363
|
points: ReadonlyArray<TypeChartDataPoint>;
|
|
361
|
-
icon?: ReactNode;
|
|
364
|
+
icon?: react.ReactNode;
|
|
362
365
|
styles?: TypeChartDataStyles & Readonly<{
|
|
363
366
|
pattern?: TypeChartStylePattern;
|
|
364
367
|
}>;
|
|
365
368
|
}>>;
|
|
366
|
-
invalidNumberLabel: ReactNode;
|
|
369
|
+
invalidNumberLabel: react.ReactNode;
|
|
367
370
|
numberLocale: Intl.LocalesArgument;
|
|
368
371
|
textLocale: Intl.LocalesArgument;
|
|
369
372
|
tooltipDateFormatter: TypeChartTooltipDateFormatter;
|
|
@@ -371,15 +374,15 @@ declare const VerticalBarChart: react.NamedExoticComponent<Readonly<{
|
|
|
371
374
|
numberFormat?: TypeChartNumberFormat;
|
|
372
375
|
seriesLimit?: number;
|
|
373
376
|
showSeriesLimitWarning?: boolean;
|
|
374
|
-
tooltip?: (
|
|
377
|
+
tooltip?: (_props: TypeChartTooltipProps) => react.ReactNode;
|
|
375
378
|
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
376
|
-
onClick?: (
|
|
379
|
+
onClick?: (_props: Readonly<{
|
|
377
380
|
x: number;
|
|
378
381
|
}>) => void;
|
|
379
|
-
tooltipClickLabel?: ReactNode;
|
|
382
|
+
tooltipClickLabel?: react.ReactNode;
|
|
380
383
|
timeFormat?: TypeChartTimeFormat;
|
|
381
384
|
xAnnotations?: TypeChartXAnnotations;
|
|
382
|
-
xAxisLabelFormatter?: (
|
|
385
|
+
xAxisLabelFormatter?: (_params: {
|
|
383
386
|
textLocale: Intl.LocalesArgument;
|
|
384
387
|
tickPositions: number[];
|
|
385
388
|
unitName: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import { T as TypeChartDataPoint, a as TypeChartDataStyles, b as TypeChartTooltipDateFormatter, c as TypeChartNumberFormat, d as TypeChartTooltipProps, e as TypeChartYAxisLabelFormatter, f as TypeChartTimeFormat, g as TypeChartXAnnotations, h as TypeChartStylePattern, i as TypeVerticalBarChartProps, j as TypeSeriesType, E as ExtendedTimeTicksInfoObject, k as TypeChartStyleColor, l as TypeChartStyleHasOnClick } from './types-
|
|
4
|
-
export { m as ExtendedAxisLabelsFormatterContextObject, n as TypeChartXAnnotationsDetails, o as TypeExtendedChart } from './types-
|
|
3
|
+
import { T as TypeChartDataPoint, a as TypeChartDataStyles, b as TypeChartTooltipDateFormatter, c as TypeChartNumberFormat, d as TypeChartTooltipProps, e as TypeChartYAxisLabelFormatter, f as TypeChartTimeFormat, g as TypeChartXAnnotations, h as TypeChartStylePattern, i as TypeVerticalBarChartProps, j as TypeSeriesType, E as ExtendedTimeTicksInfoObject, k as TypeChartStyleColor, l as TypeChartStyleHasOnClick } from './types-DxrhdAdn.js';
|
|
4
|
+
export { m as ExtendedAxisLabelsFormatterContextObject, n as TypeChartXAnnotationsDetails, o as TypeExtendedChart } from './types-DxrhdAdn.js';
|
|
5
5
|
import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
|
|
6
6
|
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
7
7
|
import { Table } from '@sproutsocial/seeds-react-table';
|
|
@@ -25,11 +25,11 @@ type TypeAreaChartProps = Readonly<{
|
|
|
25
25
|
currency?: string;
|
|
26
26
|
disableTooltips?: boolean;
|
|
27
27
|
numberFormat?: TypeChartNumberFormat;
|
|
28
|
-
tooltip?: (
|
|
28
|
+
tooltip?: (_props: TypeChartTooltipProps & Readonly<{
|
|
29
29
|
total: number | null;
|
|
30
30
|
}>) => ReactNode;
|
|
31
31
|
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
32
|
-
onClick?: (
|
|
32
|
+
onClick?: (_props: Readonly<{
|
|
33
33
|
x: number;
|
|
34
34
|
}>) => void;
|
|
35
35
|
tooltipClickLabel?: ReactNode;
|
|
@@ -65,11 +65,11 @@ declare const AreaChart: react.NamedExoticComponent<Readonly<{
|
|
|
65
65
|
currency?: string;
|
|
66
66
|
disableTooltips?: boolean;
|
|
67
67
|
numberFormat?: TypeChartNumberFormat;
|
|
68
|
-
tooltip?: (
|
|
68
|
+
tooltip?: (_props: TypeChartTooltipProps & Readonly<{
|
|
69
69
|
total: number | null;
|
|
70
70
|
}>) => ReactNode;
|
|
71
71
|
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
72
|
-
onClick?: (
|
|
72
|
+
onClick?: (_props: Readonly<{
|
|
73
73
|
x: number;
|
|
74
74
|
}>) => void;
|
|
75
75
|
tooltipClickLabel?: ReactNode;
|
|
@@ -142,7 +142,7 @@ declare const ChartTooltipHeader: react.NamedExoticComponent<TypeChartTooltipHea
|
|
|
142
142
|
declare const generateChartTooltipPortalId: (chartId: number) => string;
|
|
143
143
|
declare const ChartTooltipPortal: react.NamedExoticComponent<Readonly<{
|
|
144
144
|
chart: Chart;
|
|
145
|
-
renderContent: (
|
|
145
|
+
renderContent: (_context: TooltipFormatterContextObject) => ReactNode;
|
|
146
146
|
}>>;
|
|
147
147
|
|
|
148
148
|
type TypeChartTooltipTableProps = {
|
|
@@ -220,12 +220,15 @@ type TypeDonutChartProps = Readonly<{
|
|
|
220
220
|
disableTooltips?: boolean;
|
|
221
221
|
hideLegend?: boolean;
|
|
222
222
|
numberFormat?: TypeChartNumberFormat;
|
|
223
|
-
tooltip?: (
|
|
224
|
-
onClick?: (
|
|
223
|
+
tooltip?: (_props: TypeDonutChartTooltipProps) => ReactNode;
|
|
224
|
+
onClick?: (_props: Readonly<{
|
|
225
225
|
x: string;
|
|
226
226
|
} & TypeDonutChartDataItem>) => void;
|
|
227
227
|
tooltipClickLabel?: ReactNode;
|
|
228
228
|
}>;
|
|
229
|
+
/**
|
|
230
|
+
* @deprecated Use `DonutChart` from `@sproutsocial/seeds-react-data-viz/donut` instead.
|
|
231
|
+
*/
|
|
229
232
|
declare const DonutChart: react.NamedExoticComponent<Readonly<{
|
|
230
233
|
data: ReadonlyArray<TypeDonutChartDataItem>;
|
|
231
234
|
numberLocale: Intl.LocalesArgument;
|
|
@@ -234,8 +237,8 @@ declare const DonutChart: react.NamedExoticComponent<Readonly<{
|
|
|
234
237
|
disableTooltips?: boolean;
|
|
235
238
|
hideLegend?: boolean;
|
|
236
239
|
numberFormat?: TypeChartNumberFormat;
|
|
237
|
-
tooltip?: (
|
|
238
|
-
onClick?: (
|
|
240
|
+
tooltip?: (_props: TypeDonutChartTooltipProps) => ReactNode;
|
|
241
|
+
onClick?: (_props: Readonly<{
|
|
239
242
|
x: string;
|
|
240
243
|
} & TypeDonutChartDataItem>) => void;
|
|
241
244
|
tooltipClickLabel?: ReactNode;
|
|
@@ -274,16 +277,16 @@ type TypeLineChartProps = Readonly<{
|
|
|
274
277
|
currency?: string;
|
|
275
278
|
disableTooltips?: boolean;
|
|
276
279
|
numberFormat?: TypeChartNumberFormat;
|
|
277
|
-
tooltip?: (
|
|
280
|
+
tooltip?: (_props: TypeChartTooltipProps) => ReactNode;
|
|
278
281
|
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
279
|
-
onClick?: (
|
|
282
|
+
onClick?: (_props: Readonly<{
|
|
280
283
|
x: number;
|
|
281
284
|
}>) => void;
|
|
282
285
|
tooltipClickLabel?: ReactNode;
|
|
283
286
|
timeFormat?: TypeChartTimeFormat;
|
|
284
287
|
timezone?: string;
|
|
285
288
|
xAnnotations?: TypeChartXAnnotations;
|
|
286
|
-
xAxisLabelFormatter?: (
|
|
289
|
+
xAxisLabelFormatter?: (_params: {
|
|
287
290
|
textLocale: Intl.LocalesArgument;
|
|
288
291
|
tickPositions: number[];
|
|
289
292
|
unitName: string;
|
|
@@ -320,16 +323,16 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
|
|
|
320
323
|
currency?: string;
|
|
321
324
|
disableTooltips?: boolean;
|
|
322
325
|
numberFormat?: TypeChartNumberFormat;
|
|
323
|
-
tooltip?: (
|
|
326
|
+
tooltip?: (_props: TypeChartTooltipProps) => ReactNode;
|
|
324
327
|
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
325
|
-
onClick?: (
|
|
328
|
+
onClick?: (_props: Readonly<{
|
|
326
329
|
x: number;
|
|
327
330
|
}>) => void;
|
|
328
331
|
tooltipClickLabel?: ReactNode;
|
|
329
332
|
timeFormat?: TypeChartTimeFormat;
|
|
330
333
|
timezone?: string;
|
|
331
334
|
xAnnotations?: TypeChartXAnnotations;
|
|
332
|
-
xAxisLabelFormatter?: (
|
|
335
|
+
xAxisLabelFormatter?: (_params: {
|
|
333
336
|
textLocale: Intl.LocalesArgument;
|
|
334
337
|
tickPositions: number[];
|
|
335
338
|
unitName: string;
|
|
@@ -358,12 +361,12 @@ declare const VerticalBarChart: react.NamedExoticComponent<Readonly<{
|
|
|
358
361
|
data: ReadonlyArray<Readonly<{
|
|
359
362
|
name: string;
|
|
360
363
|
points: ReadonlyArray<TypeChartDataPoint>;
|
|
361
|
-
icon?: ReactNode;
|
|
364
|
+
icon?: react.ReactNode;
|
|
362
365
|
styles?: TypeChartDataStyles & Readonly<{
|
|
363
366
|
pattern?: TypeChartStylePattern;
|
|
364
367
|
}>;
|
|
365
368
|
}>>;
|
|
366
|
-
invalidNumberLabel: ReactNode;
|
|
369
|
+
invalidNumberLabel: react.ReactNode;
|
|
367
370
|
numberLocale: Intl.LocalesArgument;
|
|
368
371
|
textLocale: Intl.LocalesArgument;
|
|
369
372
|
tooltipDateFormatter: TypeChartTooltipDateFormatter;
|
|
@@ -371,15 +374,15 @@ declare const VerticalBarChart: react.NamedExoticComponent<Readonly<{
|
|
|
371
374
|
numberFormat?: TypeChartNumberFormat;
|
|
372
375
|
seriesLimit?: number;
|
|
373
376
|
showSeriesLimitWarning?: boolean;
|
|
374
|
-
tooltip?: (
|
|
377
|
+
tooltip?: (_props: TypeChartTooltipProps) => react.ReactNode;
|
|
375
378
|
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
376
|
-
onClick?: (
|
|
379
|
+
onClick?: (_props: Readonly<{
|
|
377
380
|
x: number;
|
|
378
381
|
}>) => void;
|
|
379
|
-
tooltipClickLabel?: ReactNode;
|
|
382
|
+
tooltipClickLabel?: react.ReactNode;
|
|
380
383
|
timeFormat?: TypeChartTimeFormat;
|
|
381
384
|
xAnnotations?: TypeChartXAnnotations;
|
|
382
|
-
xAxisLabelFormatter?: (
|
|
385
|
+
xAxisLabelFormatter?: (_params: {
|
|
383
386
|
textLocale: Intl.LocalesArgument;
|
|
384
387
|
tickPositions: number[];
|
|
385
388
|
unitName: string;
|