@sproutsocial/seeds-react-data-viz 0.17.1 → 0.19.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/bar/index.d.mts +9 -0
- package/dist/bar/index.d.ts +9 -0
- package/dist/bar/index.js +31 -77
- package/dist/bar/index.js.map +1 -1
- package/dist/bar.css +39 -0
- package/dist/chart-styles.css +295 -0
- package/dist/{chunk-QKH2ZO2D.js → chunk-4IOYAUAK.js} +3 -3
- package/dist/{chunk-QKH2ZO2D.js.map → chunk-4IOYAUAK.js.map} +1 -1
- package/dist/chunk-6EIJCJCN.js +22 -0
- package/dist/chunk-6EIJCJCN.js.map +1 -0
- package/dist/{chunk-HDEKK4W4.js → chunk-DLO4WZLT.js} +35 -17
- package/dist/chunk-DLO4WZLT.js.map +1 -0
- package/dist/donut/index.d.mts +15 -0
- package/dist/donut/index.d.ts +15 -0
- package/dist/donut/index.js +29 -44
- package/dist/donut/index.js.map +1 -1
- package/dist/donut.css +45 -0
- package/dist/esm/bar/index.js +27 -73
- package/dist/esm/bar/index.js.map +1 -1
- package/dist/esm/{chunk-O5VJGGZY.js → chunk-J5QE7VCW.js} +2 -2
- package/dist/esm/chunk-P3MVYSHX.js +22 -0
- package/dist/esm/chunk-P3MVYSHX.js.map +1 -0
- package/dist/esm/{chunk-TKNWM7L3.js → chunk-U6ZOSXK7.js} +29 -11
- package/dist/esm/chunk-U6ZOSXK7.js.map +1 -0
- package/dist/esm/donut/index.js +28 -43
- package/dist/esm/donut/index.js.map +1 -1
- package/dist/esm/line-area/index.js +23 -19
- package/dist/esm/line-area/index.js.map +1 -1
- package/dist/esm/sparkline/index.js +2 -1
- package/dist/esm/sparkline/index.js.map +1 -1
- package/dist/line-area/index.d.mts +22 -0
- package/dist/line-area/index.d.ts +22 -0
- package/dist/line-area/index.js +28 -24
- package/dist/line-area/index.js.map +1 -1
- package/dist/line-area.css +112 -0
- package/dist/sparkline/index.d.mts +7 -0
- package/dist/sparkline/index.d.ts +7 -0
- package/dist/sparkline/index.js +4 -3
- package/dist/sparkline/index.js.map +1 -1
- package/package.json +11 -7
- package/dist/chunk-HDEKK4W4.js.map +0 -1
- package/dist/esm/chunk-TKNWM7L3.js.map +0 -1
- /package/dist/esm/{chunk-O5VJGGZY.js.map → chunk-J5QE7VCW.js.map} +0 -0
package/dist/esm/donut/index.js
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import {
|
|
2
2
|
DONUT_CHART_HEIGHT
|
|
3
3
|
} from "../chunk-XMYGML25.js";
|
|
4
|
+
import {
|
|
5
|
+
getChartContainerProps
|
|
6
|
+
} from "../chunk-P3MVYSHX.js";
|
|
4
7
|
import {
|
|
5
8
|
ChartRenderer,
|
|
6
9
|
buildBaseChartOptions,
|
|
7
10
|
useSeedsChartSetup
|
|
8
|
-
} from "../chunk-
|
|
9
|
-
import
|
|
10
|
-
donutChartStyles
|
|
11
|
-
} from "../chunk-Z4LOM4OZ.js";
|
|
11
|
+
} from "../chunk-U6ZOSXK7.js";
|
|
12
|
+
import "../chunk-Z4LOM4OZ.js";
|
|
12
13
|
|
|
13
14
|
// src/charts/donut/DonutChart.tsx
|
|
14
15
|
import { memo, useMemo } from "react";
|
|
@@ -65,21 +66,6 @@ function buildDonutOptions(props, colors) {
|
|
|
65
66
|
};
|
|
66
67
|
}
|
|
67
68
|
|
|
68
|
-
// src/charts/donut/styles.ts
|
|
69
|
-
import styled from "styled-components";
|
|
70
|
-
var DonutChartContainer = styled.div`
|
|
71
|
-
background-color: ${({ theme }) => theme.colors.container.background.base};
|
|
72
|
-
${donutChartStyles}
|
|
73
|
-
|
|
74
|
-
/* Dim non-hovered slices. Highcharts adds .highcharts-point-inactive to
|
|
75
|
-
all pie points except the hovered one. In styledMode, opacity is CSS-only
|
|
76
|
-
(JS plotOptions.states.inactive.opacity is ignored). */
|
|
77
|
-
.highcharts-pie-series .highcharts-point-inactive {
|
|
78
|
-
opacity: 0.3;
|
|
79
|
-
transition: opacity 0s;
|
|
80
|
-
}
|
|
81
|
-
`;
|
|
82
|
-
|
|
83
69
|
// src/charts/donut/DonutChart.tsx
|
|
84
70
|
import { jsx } from "react/jsx-runtime";
|
|
85
71
|
var DonutChart = memo(function DonutChart2(props) {
|
|
@@ -91,33 +77,32 @@ var DonutChart = memo(function DonutChart2(props) {
|
|
|
91
77
|
[props, colors]
|
|
92
78
|
);
|
|
93
79
|
const hasOnClick = Boolean(props.onClick);
|
|
80
|
+
const containerProps = getChartContainerProps({
|
|
81
|
+
familyClasses: ["seeds-chart-donut"],
|
|
82
|
+
colors: props.data.map((d) => d.color),
|
|
83
|
+
hasOnClick,
|
|
84
|
+
className: props.className
|
|
85
|
+
});
|
|
94
86
|
const tooltip = props.tooltip ? (args) => props.tooltip(args) : void 0;
|
|
95
|
-
return /* @__PURE__ */ jsx(
|
|
96
|
-
|
|
87
|
+
return /* @__PURE__ */ jsx("div", { ...containerProps, children: /* @__PURE__ */ jsx(
|
|
88
|
+
ChartRenderer,
|
|
97
89
|
{
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
hasOnClick,
|
|
113
|
-
tooltipClickLabel: props.tooltipClickLabel,
|
|
114
|
-
invalidNumberLabel: props.invalidNumberLabel,
|
|
115
|
-
valueFormat: props.format,
|
|
116
|
-
onReady: props.onReady
|
|
117
|
-
}
|
|
118
|
-
)
|
|
90
|
+
options,
|
|
91
|
+
series: props.data.map((d, i) => ({
|
|
92
|
+
name: d.name,
|
|
93
|
+
color: colors[i],
|
|
94
|
+
icon: d.icon
|
|
95
|
+
})),
|
|
96
|
+
colors,
|
|
97
|
+
tooltip,
|
|
98
|
+
hasOnClick,
|
|
99
|
+
tooltipClickLabel: props.tooltipClickLabel,
|
|
100
|
+
invalidNumberLabel: props.invalidNumberLabel,
|
|
101
|
+
valueFormat: props.format,
|
|
102
|
+
exportTitle: props.exportTitle,
|
|
103
|
+
onReady: props.onReady
|
|
119
104
|
}
|
|
120
|
-
);
|
|
105
|
+
) });
|
|
121
106
|
});
|
|
122
107
|
export {
|
|
123
108
|
DonutChart
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/charts/donut/DonutChart.tsx","../../../src/charts/donut/adapter.ts"
|
|
1
|
+
{"version":3,"sources":["../../../src/charts/donut/DonutChart.tsx","../../../src/charts/donut/adapter.ts"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport {\n useSeedsChartSetup,\n ChartRenderer,\n type ChartTooltipProps,\n} from \"../shared/chartBase\";\nimport { getChartContainerProps } from \"../shared/chartContainer\";\nimport { buildDonutOptions } from \"./adapter\";\nimport type { DonutChartProps, DonutChartTooltipProps } from \"./types\";\n\n/**\n * DonutChart renders a donut (ring) chart from a flat list of named values.\n *\n * Like SparklineChart, it carries no `styled-components`: the wrapper is a plain\n * `<div>` and the Highcharts styling ships as static CSS. Consumers import both\n * `@sproutsocial/seeds-react-data-viz/chart-styles.css` and `.../donut.css` once\n * (the component never self-imports its CSS).\n */\nexport const DonutChart = memo(function DonutChart(props: DonutChartProps) {\n // Map each data item to { color? } so useSeedsChartSetup resolves the palette\n // used for the Highcharts options and the legend swatches.\n const { colors } = useSeedsChartSetup({\n series: props.data.map((d) => ({ color: d.color })),\n });\n\n // Memoize to avoid spurious Highcharts redraws on parent re-renders.\n const options = useMemo(\n () => buildDonutOptions(props, colors),\n [props, colors]\n );\n const hasOnClick = Boolean(props.onClick);\n\n // Container props from the shared contract. RAW per-series colors only —\n // an unset series falls through to chart-styles.css's --highcharts-color-N\n // default (the DS data-viz palette, light/dark-correct), matching the\n // bar/line-area convention. Only an explicit consumer override is inlined.\n const containerProps = getChartContainerProps({\n familyClasses: [\"seeds-chart-donut\"],\n colors: props.data.map((d) => d.color),\n hasOnClick,\n className: props.className,\n });\n\n // `ChartRenderer` expects `(ChartTooltipProps) => ReactNode`. The consumer's\n // function expects the narrower `DonutChartTooltipProps` (required `percent`).\n // Wrap rather than cast the function type so the intent is explicit.\n const tooltip = props.tooltip\n ? (args: ChartTooltipProps) =>\n props.tooltip!(args as unknown as DonutChartTooltipProps)\n : undefined;\n\n return (\n <div {...containerProps}>\n <ChartRenderer\n options={options}\n series={props.data.map((d, i) => ({\n name: d.name,\n color: colors[i],\n icon: d.icon,\n }))}\n colors={colors}\n tooltip={tooltip}\n hasOnClick={hasOnClick}\n tooltipClickLabel={props.tooltipClickLabel}\n invalidNumberLabel={props.invalidNumberLabel}\n valueFormat={props.format}\n exportTitle={props.exportTitle}\n onReady={props.onReady}\n />\n </div>\n );\n});\n","import type { SeedsChartOptions } from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport { DONUT_CHART_HEIGHT } from \"../../constants/chartOptions\";\nimport type { DonutChartProps } from \"./types\";\n\nexport function buildDonutOptions(\n props: DonutChartProps,\n colors: ReadonlyArray<string>\n): SeedsChartOptions {\n const base = buildBaseChartOptions({\n type: \"pie\",\n description: props.description,\n });\n return {\n ...base,\n chart: {\n type: \"pie\" as const,\n styledMode: true,\n animation: false,\n // Height only — width is left fluid (v1 parity) so the chart fills its\n // container and the pie auto-centers. The container bounds the width (see\n // styles.ts) so the legend below wraps to the donut and centers with it.\n height: DONUT_CHART_HEIGHT,\n // Drop Highcharts' default spacing so the donut uses the full height.\n spacing: [0, 0, 0, 0],\n },\n plotOptions: {\n pie: {\n animation: false,\n // borderRadius must be set in JS, not CSS, because Highcharts computes\n // the arc path before applying it — CSS border-radius has no effect.\n borderRadius: 0,\n dataLabels: { enabled: false },\n innerSize: \"50%\",\n ...(props.onClick\n ? {\n point: {\n events: {\n click(this: { name: string }) {\n props.onClick?.({ position: this.name });\n },\n },\n },\n }\n : {}),\n },\n },\n series: [\n {\n type: \"pie\",\n name: \"Data\",\n data: props.data.map((d, i) => ({\n name: d.name,\n y: d.value,\n color: d.color ?? colors[i] ?? \"\",\n })),\n },\n ],\n };\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,MAAM,eAAe;;;ACKvB,SAAS,kBACd,OACA,QACmB;AACnB,QAAM,OAAO,sBAAsB;AAAA,IACjC,MAAM;AAAA,IACN,aAAa,MAAM;AAAA,EACrB,CAAC;AACD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,OAAO;AAAA,MACL,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA,MAIX,QAAQ;AAAA;AAAA,MAER,SAAS,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACtB;AAAA,IACA,aAAa;AAAA,MACX,KAAK;AAAA,QACH,WAAW;AAAA;AAAA;AAAA,QAGX,cAAc;AAAA,QACd,YAAY,EAAE,SAAS,MAAM;AAAA,QAC7B,WAAW;AAAA,QACX,GAAI,MAAM,UACN;AAAA,UACE,OAAO;AAAA,YACL,QAAQ;AAAA,cACN,QAA8B;AAC5B,sBAAM,UAAU,EAAE,UAAU,KAAK,KAAK,CAAC;AAAA,cACzC;AAAA,YACF;AAAA,UACF;AAAA,QACF,IACA,CAAC;AAAA,MACP;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM,MAAM,KAAK,IAAI,CAAC,GAAG,OAAO;AAAA,UAC9B,MAAM,EAAE;AAAA,UACR,GAAG,EAAE;AAAA,UACL,OAAO,EAAE,SAAS,OAAO,CAAC,KAAK;AAAA,QACjC,EAAE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;;;ADNM;AAnCC,IAAM,aAAa,KAAK,SAASA,YAAW,OAAwB;AAGzE,QAAM,EAAE,OAAO,IAAI,mBAAmB;AAAA,IACpC,QAAQ,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE;AAAA,EACpD,CAAC;AAGD,QAAM,UAAU;AAAA,IACd,MAAM,kBAAkB,OAAO,MAAM;AAAA,IACrC,CAAC,OAAO,MAAM;AAAA,EAChB;AACA,QAAM,aAAa,QAAQ,MAAM,OAAO;AAMxC,QAAM,iBAAiB,uBAAuB;AAAA,IAC5C,eAAe,CAAC,mBAAmB;AAAA,IACnC,QAAQ,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,KAAK;AAAA,IACrC;AAAA,IACA,WAAW,MAAM;AAAA,EACnB,CAAC;AAKD,QAAM,UAAU,MAAM,UAClB,CAAC,SACC,MAAM,QAAS,IAAyC,IAC1D;AAEJ,SACE,oBAAC,SAAK,GAAG,gBACP;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,MAAM,KAAK,IAAI,CAAC,GAAG,OAAO;AAAA,QAChC,MAAM,EAAE;AAAA,QACR,OAAO,OAAO,CAAC;AAAA,QACf,MAAM,EAAE;AAAA,MACV,EAAE;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM;AAAA,MACzB,oBAAoB,MAAM;AAAA,MAC1B,aAAa,MAAM;AAAA,MACnB,aAAa,MAAM;AAAA,MACnB,SAAS,MAAM;AAAA;AAAA,EACjB,GACF;AAEJ,CAAC;","names":["DonutChart"]}
|
|
@@ -2,7 +2,10 @@ import {
|
|
|
2
2
|
buildAnnotationConfig,
|
|
3
3
|
defaultValueAxisLabelFormatter,
|
|
4
4
|
makeValueAxisLabelFormatter
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-J5QE7VCW.js";
|
|
6
|
+
import {
|
|
7
|
+
getChartContainerProps
|
|
8
|
+
} from "../chunk-P3MVYSHX.js";
|
|
6
9
|
import {
|
|
7
10
|
buildDimensionalAxis,
|
|
8
11
|
resolveTooltipTimezone
|
|
@@ -11,11 +14,8 @@ import {
|
|
|
11
14
|
ChartRenderer,
|
|
12
15
|
buildBaseChartOptions,
|
|
13
16
|
useSeedsChartSetup
|
|
14
|
-
} from "../chunk-
|
|
15
|
-
import
|
|
16
|
-
areaChartStyles,
|
|
17
|
-
lineChartStyles
|
|
18
|
-
} from "../chunk-Z4LOM4OZ.js";
|
|
17
|
+
} from "../chunk-U6ZOSXK7.js";
|
|
18
|
+
import "../chunk-Z4LOM4OZ.js";
|
|
19
19
|
|
|
20
20
|
// src/charts/line-area/LineAreaChart.tsx
|
|
21
21
|
import { memo, useMemo } from "react";
|
|
@@ -106,13 +106,6 @@ function buildLineAreaChartOptions(props) {
|
|
|
106
106
|
return { options, annotationLookup, tooltipTimezone };
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
// src/charts/line-area/styles.ts
|
|
110
|
-
import styled from "styled-components";
|
|
111
|
-
var LineAreaChartContainer = styled.div`
|
|
112
|
-
background-color: ${({ theme }) => theme.colors.container.background.base};
|
|
113
|
-
${(props) => props.$isArea ? areaChartStyles : lineChartStyles}
|
|
114
|
-
`;
|
|
115
|
-
|
|
116
109
|
// src/charts/line-area/LineAreaChart.tsx
|
|
117
110
|
import { jsx } from "react/jsx-runtime";
|
|
118
111
|
var AREA_VARIANTS2 = /* @__PURE__ */ new Set(["area", "areaspline"]);
|
|
@@ -126,14 +119,24 @@ var LineAreaChart = memo(function LineAreaChart2(props) {
|
|
|
126
119
|
[props]
|
|
127
120
|
);
|
|
128
121
|
const hasOnClick = Boolean(props.onClick);
|
|
122
|
+
const isArea = AREA_VARIANTS2.has(props.variant);
|
|
129
123
|
return /* @__PURE__ */ jsx(
|
|
130
|
-
|
|
124
|
+
"div",
|
|
131
125
|
{
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
126
|
+
...getChartContainerProps({
|
|
127
|
+
familyClasses: [
|
|
128
|
+
"seeds-chart-time-series",
|
|
129
|
+
isArea ? "seeds-chart-area" : "seeds-chart-line"
|
|
130
|
+
],
|
|
131
|
+
// RAW per-series colors: only an explicit consumer override is inlined
|
|
132
|
+
// as --highcharts-color-N; an unset series falls through to the DS
|
|
133
|
+
// palette default in chart-styles.css. ChartRenderer below still gets
|
|
134
|
+
// the palette-RESOLVED `colors` for its own styled-components engine.
|
|
135
|
+
colors: props.series.map((s) => s.color),
|
|
136
|
+
patterns,
|
|
137
|
+
hasOnClick,
|
|
138
|
+
className: props.className
|
|
139
|
+
}),
|
|
137
140
|
children: /* @__PURE__ */ jsx(
|
|
138
141
|
ChartRenderer,
|
|
139
142
|
{
|
|
@@ -147,6 +150,7 @@ var LineAreaChart = memo(function LineAreaChart2(props) {
|
|
|
147
150
|
timezone: tooltipTimezone,
|
|
148
151
|
invalidNumberLabel: props.invalidNumberLabel,
|
|
149
152
|
valueFormat: props.yAxis?.format,
|
|
153
|
+
exportTitle: props.exportTitle,
|
|
150
154
|
onReady: props.onReady
|
|
151
155
|
}
|
|
152
156
|
)
|
|
@@ -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 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 // A dedicated plotLine at 0, styled distinctly from regular gridlines\n // (see chartStyles.ts).\n plotLines: [{ value: 0, className: \"y-axis-zero-line\", zIndex: 3 }],\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"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { useSeedsChartSetup, ChartRenderer } from \"../shared/chartBase\";\nimport { getChartContainerProps } from \"../shared/chartContainer\";\nimport { buildLineAreaChartOptions } from \"./adapter\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\n/**\n * LineAreaChart — the v2 time-series line/area family.\n *\n * Like SparklineChart, the wrapper carries no styled-components: it is a plain\n * <div> whose className / inline custom properties / data-attributes come from\n * the shared getChartContainerProps contract (CE-164), and its Highcharts\n * styling ships as a static line-area.css. chart-styles.css owns the shared\n * base (background, per-series color fallback, click cursor, tooltip, legend)\n * AND the shared cross-family .seeds-chart-time-series layer (crosshair,\n * grid/axis lines, ticks, zero line, axis-label typography) that bar also uses;\n * line-area.css owns only the .seeds-chart-line / .seeds-chart-area selectors.\n * Neither is imported here — matching the Sparkline/bar convention, the component never\n * self-imports its stylesheet; consumers import both explicitly (see\n * charts/README.md).\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 const isArea = AREA_VARIANTS.has(props.variant);\n\n return (\n <div\n {...getChartContainerProps({\n familyClasses: [\n \"seeds-chart-time-series\",\n isArea ? \"seeds-chart-area\" : \"seeds-chart-line\",\n ],\n // RAW per-series colors: only an explicit consumer override is inlined\n // as --highcharts-color-N; an unset series falls through to the DS\n // palette default in chart-styles.css. ChartRenderer below still gets\n // the palette-RESOLVED `colors` for its own styled-components engine.\n colors: props.series.map((s) => s.color),\n patterns,\n hasOnClick,\n className: props.className,\n })}\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 exportTitle={props.exportTitle}\n onReady={props.onReady}\n />\n </div>\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 // A dedicated plotLine at 0, styled distinctly from regular gridlines\n // (see chartStyles.ts).\n plotLines: [{ value: 0, className: \"y-axis-zero-line\", zIndex: 3 }],\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"],"mappings":"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","names":["AREA_VARIANTS","LineAreaChart"]}
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
import {
|
|
6
6
|
ChartRenderer,
|
|
7
7
|
buildBaseChartOptions
|
|
8
|
-
} from "../chunk-
|
|
8
|
+
} from "../chunk-U6ZOSXK7.js";
|
|
9
9
|
import "../chunk-Z4LOM4OZ.js";
|
|
10
10
|
|
|
11
11
|
// src/charts/sparkline/SparklineChart.tsx
|
|
@@ -111,6 +111,7 @@ var SparklineChart = memo(function SparklineChart2(props) {
|
|
|
111
111
|
timezone: tooltipTimezone,
|
|
112
112
|
invalidNumberLabel: props.invalidNumberLabel,
|
|
113
113
|
hideLegend: true,
|
|
114
|
+
exportTitle: props.exportTitle,
|
|
114
115
|
onReady: props.onReady
|
|
115
116
|
}
|
|
116
117
|
)
|
|
@@ -1 +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"]}
|
|
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 exportTitle={props.exportTitle}\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"]}
|
|
@@ -73,6 +73,13 @@ interface LineAreaChartProps {
|
|
|
73
73
|
tooltipClickLabel?: ReactNode;
|
|
74
74
|
/** Override for the value shown when a data point is invalid/missing (null). Defaults to an em-dash. */
|
|
75
75
|
invalidNumberLabel?: ReactNode;
|
|
76
|
+
/**
|
|
77
|
+
* Chart title included in the exported image (PNG/SVG/PDF) only — it does
|
|
78
|
+
* *not* render on screen. The on-screen title is a React sibling outside the
|
|
79
|
+
* chart SVG and can't be captured on export, so `exportTitle` is baked into
|
|
80
|
+
* the export clone as a themed native Highcharts title. Omit for no title.
|
|
81
|
+
*/
|
|
82
|
+
exportTitle?: string;
|
|
76
83
|
/**
|
|
77
84
|
* Fired once per chart instance with an opaque {@link ChartExportHandle} for
|
|
78
85
|
* triggering PNG/SVG/PDF/CSV downloads. Re-fires only on a genuine remount,
|
|
@@ -81,6 +88,21 @@ interface LineAreaChartProps {
|
|
|
81
88
|
onReady?: (handle: ChartExportHandle) => void;
|
|
82
89
|
}
|
|
83
90
|
|
|
91
|
+
/**
|
|
92
|
+
* LineAreaChart — the v2 time-series line/area family.
|
|
93
|
+
*
|
|
94
|
+
* Like SparklineChart, the wrapper carries no styled-components: it is a plain
|
|
95
|
+
* <div> whose className / inline custom properties / data-attributes come from
|
|
96
|
+
* the shared getChartContainerProps contract (CE-164), and its Highcharts
|
|
97
|
+
* styling ships as a static line-area.css. chart-styles.css owns the shared
|
|
98
|
+
* base (background, per-series color fallback, click cursor, tooltip, legend)
|
|
99
|
+
* AND the shared cross-family .seeds-chart-time-series layer (crosshair,
|
|
100
|
+
* grid/axis lines, ticks, zero line, axis-label typography) that bar also uses;
|
|
101
|
+
* line-area.css owns only the .seeds-chart-line / .seeds-chart-area selectors.
|
|
102
|
+
* Neither is imported here — matching the Sparkline/bar convention, the component never
|
|
103
|
+
* self-imports its stylesheet; consumers import both explicitly (see
|
|
104
|
+
* charts/README.md).
|
|
105
|
+
*/
|
|
84
106
|
declare const LineAreaChart: react.NamedExoticComponent<LineAreaChartProps>;
|
|
85
107
|
|
|
86
108
|
export { CategoryAxis, ChartExportHandle, DatetimeAxis, LineAreaChart, type LineAreaChartProps, type LineAreaSeries, type LineAreaVariant, type LineAreaXAxis, type LineAreaYAxis };
|
|
@@ -73,6 +73,13 @@ interface LineAreaChartProps {
|
|
|
73
73
|
tooltipClickLabel?: ReactNode;
|
|
74
74
|
/** Override for the value shown when a data point is invalid/missing (null). Defaults to an em-dash. */
|
|
75
75
|
invalidNumberLabel?: ReactNode;
|
|
76
|
+
/**
|
|
77
|
+
* Chart title included in the exported image (PNG/SVG/PDF) only — it does
|
|
78
|
+
* *not* render on screen. The on-screen title is a React sibling outside the
|
|
79
|
+
* chart SVG and can't be captured on export, so `exportTitle` is baked into
|
|
80
|
+
* the export clone as a themed native Highcharts title. Omit for no title.
|
|
81
|
+
*/
|
|
82
|
+
exportTitle?: string;
|
|
76
83
|
/**
|
|
77
84
|
* Fired once per chart instance with an opaque {@link ChartExportHandle} for
|
|
78
85
|
* triggering PNG/SVG/PDF/CSV downloads. Re-fires only on a genuine remount,
|
|
@@ -81,6 +88,21 @@ interface LineAreaChartProps {
|
|
|
81
88
|
onReady?: (handle: ChartExportHandle) => void;
|
|
82
89
|
}
|
|
83
90
|
|
|
91
|
+
/**
|
|
92
|
+
* LineAreaChart — the v2 time-series line/area family.
|
|
93
|
+
*
|
|
94
|
+
* Like SparklineChart, the wrapper carries no styled-components: it is a plain
|
|
95
|
+
* <div> whose className / inline custom properties / data-attributes come from
|
|
96
|
+
* the shared getChartContainerProps contract (CE-164), and its Highcharts
|
|
97
|
+
* styling ships as a static line-area.css. chart-styles.css owns the shared
|
|
98
|
+
* base (background, per-series color fallback, click cursor, tooltip, legend)
|
|
99
|
+
* AND the shared cross-family .seeds-chart-time-series layer (crosshair,
|
|
100
|
+
* grid/axis lines, ticks, zero line, axis-label typography) that bar also uses;
|
|
101
|
+
* line-area.css owns only the .seeds-chart-line / .seeds-chart-area selectors.
|
|
102
|
+
* Neither is imported here — matching the Sparkline/bar convention, the component never
|
|
103
|
+
* self-imports its stylesheet; consumers import both explicitly (see
|
|
104
|
+
* charts/README.md).
|
|
105
|
+
*/
|
|
84
106
|
declare const LineAreaChart: react.NamedExoticComponent<LineAreaChartProps>;
|
|
85
107
|
|
|
86
108
|
export { CategoryAxis, ChartExportHandle, DatetimeAxis, LineAreaChart, type LineAreaChartProps, type LineAreaSeries, type LineAreaVariant, type LineAreaXAxis, type LineAreaYAxis };
|
package/dist/line-area/index.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _chunk4IOYAUAKjs = require('../chunk-4IOYAUAK.js');
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
var _chunk6D7P3IOTjs = require('../chunk-6D7P3IOT.js');
|
|
8
|
+
var _chunk6EIJCJCNjs = require('../chunk-6EIJCJCN.js');
|
|
10
9
|
|
|
11
10
|
|
|
12
11
|
|
|
12
|
+
var _chunk6D7P3IOTjs = require('../chunk-6D7P3IOT.js');
|
|
13
13
|
|
|
14
|
-
var _chunkHDEKK4W4js = require('../chunk-HDEKK4W4.js');
|
|
15
14
|
|
|
16
15
|
|
|
17
16
|
|
|
18
|
-
var
|
|
17
|
+
var _chunkDLO4WZLTjs = require('../chunk-DLO4WZLT.js');
|
|
18
|
+
require('../chunk-WEKDYQ4T.js');
|
|
19
19
|
|
|
20
20
|
// src/charts/line-area/LineAreaChart.tsx
|
|
21
21
|
var _react = require('react');
|
|
@@ -44,11 +44,11 @@ function withIsolatedPointMarkers(data) {
|
|
|
44
44
|
function buildLineAreaChartOptions(props) {
|
|
45
45
|
const tooltipTimezone = _chunk6D7P3IOTjs.resolveTooltipTimezone.call(void 0, props.xAxis, props.timezone);
|
|
46
46
|
const isStacked = AREA_VARIANTS.has(props.variant) && Boolean(props.stacking);
|
|
47
|
-
const { annotations, lookup: annotationLookup } =
|
|
47
|
+
const { annotations, lookup: annotationLookup } = _chunk4IOYAUAKjs.buildAnnotationConfig.call(void 0,
|
|
48
48
|
props.annotations
|
|
49
49
|
);
|
|
50
50
|
const options = {
|
|
51
|
-
...
|
|
51
|
+
..._chunkDLO4WZLTjs.buildBaseChartOptions.call(void 0, {
|
|
52
52
|
type: props.variant,
|
|
53
53
|
description: props.description,
|
|
54
54
|
valueSuffix: props.valueSuffix,
|
|
@@ -73,7 +73,7 @@ function buildLineAreaChartOptions(props) {
|
|
|
73
73
|
labels: {
|
|
74
74
|
// A declarative `format` drives ticks through the shared valueFormatter;
|
|
75
75
|
// absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).
|
|
76
|
-
formatter: _optionalChain([props, 'access', _9 => _9.yAxis, 'optionalAccess', _10 => _10.format]) ?
|
|
76
|
+
formatter: _optionalChain([props, 'access', _9 => _9.yAxis, 'optionalAccess', _10 => _10.format]) ? _chunk4IOYAUAKjs.makeValueAxisLabelFormatter.call(void 0, props.yAxis.format) : _chunk4IOYAUAKjs.defaultValueAxisLabelFormatter
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
79
|
plotOptions: {
|
|
@@ -106,18 +106,11 @@ function buildLineAreaChartOptions(props) {
|
|
|
106
106
|
return { options, annotationLookup, tooltipTimezone };
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
// src/charts/line-area/styles.ts
|
|
110
|
-
var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
|
|
111
|
-
var LineAreaChartContainer = _styledcomponents2.default.div`
|
|
112
|
-
background-color: ${({ theme }) => theme.colors.container.background.base};
|
|
113
|
-
${(props) => props.$isArea ? _chunkWEKDYQ4Tjs.areaChartStyles : _chunkWEKDYQ4Tjs.lineChartStyles}
|
|
114
|
-
`;
|
|
115
|
-
|
|
116
109
|
// src/charts/line-area/LineAreaChart.tsx
|
|
117
110
|
var _jsxruntime = require('react/jsx-runtime');
|
|
118
111
|
var AREA_VARIANTS2 = /* @__PURE__ */ new Set(["area", "areaspline"]);
|
|
119
112
|
var LineAreaChart = _react.memo.call(void 0, function LineAreaChart2(props) {
|
|
120
|
-
const { colors, patterns } =
|
|
113
|
+
const { colors, patterns } = _chunkDLO4WZLTjs.useSeedsChartSetup.call(void 0, {
|
|
121
114
|
series: props.series,
|
|
122
115
|
includePatterns: true
|
|
123
116
|
});
|
|
@@ -126,16 +119,26 @@ var LineAreaChart = _react.memo.call(void 0, function LineAreaChart2(props) {
|
|
|
126
119
|
[props]
|
|
127
120
|
);
|
|
128
121
|
const hasOnClick = Boolean(props.onClick);
|
|
122
|
+
const isArea = AREA_VARIANTS2.has(props.variant);
|
|
129
123
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
130
|
-
|
|
124
|
+
"div",
|
|
131
125
|
{
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
126
|
+
..._chunk6EIJCJCNjs.getChartContainerProps.call(void 0, {
|
|
127
|
+
familyClasses: [
|
|
128
|
+
"seeds-chart-time-series",
|
|
129
|
+
isArea ? "seeds-chart-area" : "seeds-chart-line"
|
|
130
|
+
],
|
|
131
|
+
// RAW per-series colors: only an explicit consumer override is inlined
|
|
132
|
+
// as --highcharts-color-N; an unset series falls through to the DS
|
|
133
|
+
// palette default in chart-styles.css. ChartRenderer below still gets
|
|
134
|
+
// the palette-RESOLVED `colors` for its own styled-components engine.
|
|
135
|
+
colors: props.series.map((s) => s.color),
|
|
136
|
+
patterns,
|
|
137
|
+
hasOnClick,
|
|
138
|
+
className: props.className
|
|
139
|
+
}),
|
|
137
140
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
138
|
-
|
|
141
|
+
_chunkDLO4WZLTjs.ChartRenderer,
|
|
139
142
|
{
|
|
140
143
|
options,
|
|
141
144
|
series: props.series,
|
|
@@ -147,6 +150,7 @@ var LineAreaChart = _react.memo.call(void 0, function LineAreaChart2(props) {
|
|
|
147
150
|
timezone: tooltipTimezone,
|
|
148
151
|
invalidNumberLabel: props.invalidNumberLabel,
|
|
149
152
|
valueFormat: _optionalChain([props, 'access', _11 => _11.yAxis, 'optionalAccess', _12 => _12.format]),
|
|
153
|
+
exportTitle: props.exportTitle,
|
|
150
154
|
onReady: props.onReady
|
|
151
155
|
}
|
|
152
156
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/line-area/index.js","../../src/charts/line-area/LineAreaChart.tsx","../../src/charts/line-area/adapter.ts","../../src/charts/line-area/styles.ts"],"names":["AREA_VARIANTS","LineAreaChart"],"mappings":"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","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/line-area/index.js","sourcesContent":[null,"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 // A dedicated plotLine at 0, styled distinctly from regular gridlines\n // (see chartStyles.ts).\n plotLines: [{ value: 0, className: \"y-axis-zero-line\", zIndex: 3 }],\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"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/line-area/index.js","../../src/charts/line-area/LineAreaChart.tsx","../../src/charts/line-area/adapter.ts"],"names":["AREA_VARIANTS","LineAreaChart"],"mappings":"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","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/line-area/index.js","sourcesContent":[null,"import { memo, useMemo } from \"react\";\nimport { useSeedsChartSetup, ChartRenderer } from \"../shared/chartBase\";\nimport { getChartContainerProps } from \"../shared/chartContainer\";\nimport { buildLineAreaChartOptions } from \"./adapter\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\n/**\n * LineAreaChart — the v2 time-series line/area family.\n *\n * Like SparklineChart, the wrapper carries no styled-components: it is a plain\n * <div> whose className / inline custom properties / data-attributes come from\n * the shared getChartContainerProps contract (CE-164), and its Highcharts\n * styling ships as a static line-area.css. chart-styles.css owns the shared\n * base (background, per-series color fallback, click cursor, tooltip, legend)\n * AND the shared cross-family .seeds-chart-time-series layer (crosshair,\n * grid/axis lines, ticks, zero line, axis-label typography) that bar also uses;\n * line-area.css owns only the .seeds-chart-line / .seeds-chart-area selectors.\n * Neither is imported here — matching the Sparkline/bar convention, the component never\n * self-imports its stylesheet; consumers import both explicitly (see\n * charts/README.md).\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 const isArea = AREA_VARIANTS.has(props.variant);\n\n return (\n <div\n {...getChartContainerProps({\n familyClasses: [\n \"seeds-chart-time-series\",\n isArea ? \"seeds-chart-area\" : \"seeds-chart-line\",\n ],\n // RAW per-series colors: only an explicit consumer override is inlined\n // as --highcharts-color-N; an unset series falls through to the DS\n // palette default in chart-styles.css. ChartRenderer below still gets\n // the palette-RESOLVED `colors` for its own styled-components engine.\n colors: props.series.map((s) => s.color),\n patterns,\n hasOnClick,\n className: props.className,\n })}\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 exportTitle={props.exportTitle}\n onReady={props.onReady}\n />\n </div>\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 // A dedicated plotLine at 0, styled distinctly from regular gridlines\n // (see chartStyles.ts).\n plotLines: [{ value: 0, className: \"y-axis-zero-line\", zIndex: 3 }],\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"]}
|